1. ev
  2. Soru-cevap
  3. D3.js'de basit bir dağılım örneği örneği?

D3.js'de basit bir dağılım örneği örneği?

2012-05-03 46 views
20

D3.js.'de bir dağılım taslağının nasıl çizileceğine dair bir örnek arıyorum.D3.js'de basit bir dağılım örneği örneği?

official D3.js examples'u arayarak basit bir örnek bulamadım (etkileyici olsalar bile).

  • beraberlik ve grafik üzerinde x ve y eksenleri
  • beraberlik dağılım noktaları etiketlemek: Ben sadece nasıl bilmek istiyorum.

bu D3 reusable library içinde this example buldunuz ama bana zor temel noktaları çekmeyi yapmak harici dosyalarla, gerek çok daha karmaşıktır. Başlamak için basit bir scatterplot örneğine işaret eden var mı?

Çok teşekkürler.

kaynak

2012-05-03 Richard

+0

ben Daha önce hiç kullanılmamış ve çalışma örneğini bir araya getirmekten vazgeçmişti. Geleneksel bir şey yapmak için verileri ve eksenleri dönüştürmeniz gerekiyor (varsayılan y ekseni aşağıya bakar). İşte kullandığım sayfalar: http://alignedleft.com/tutorials/d3/making-a-scatterplot/ ve http://bl.ocks.org/1166403 Umarım yardım ederler! –

cevap

23

Başlamanız gerekir. Bunu http://bl.ocks.org/2595950 numaralı telefondan görebilirsiniz. Böyle Kullanılan 

// data that you want to plot, I've used separate arrays for x and y values 
var xdata = [5, 10, 15, 20], 
    ydata = [3, 17, 4, 6]; 

// size and margins for the chart 
var margin = {top: 20, right: 15, bottom: 60, left: 60} 
    , width = 960 - margin.left - margin.right 
    , height = 500 - margin.top - margin.bottom; 

// x and y scales, I've used linear here but there are other options 
// the scales translate data values to pixel values for you 
var x = d3.scale.linear() 
      .domain([0, d3.max(xdata)]) // the range of the values to plot 
      .range([ 0, width ]);  // the pixel range of the x-axis 

var y = d3.scale.linear() 
      .domain([0, d3.max(ydata)]) 
      .range([ height, 0 ]); 

// the chart object, includes all margins 
var chart = d3.select('body') 
.append('svg:svg') 
.attr('width', width + margin.right + margin.left) 
.attr('height', height + margin.top + margin.bottom) 
.attr('class', 'chart') 

// the main object where the chart and axis will be drawn 
var main = chart.append('g') 
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') 
.attr('width', width) 
.attr('height', height) 
.attr('class', 'main') 

// draw the x axis 
var xAxis = d3.svg.axis() 
.scale(x) 
.orient('bottom'); 

main.append('g') 
.attr('transform', 'translate(0,' + height + ')') 
.attr('class', 'main axis date') 
.call(xAxis); 

// draw the y axis 
var yAxis = d3.svg.axis() 
.scale(y) 
.orient('left'); 

main.append('g') 
.attr('transform', 'translate(0,0)') 
.attr('class', 'main axis date') 
.call(yAxis); 

// draw the graph object 
var g = main.append("svg:g"); 

g.selectAll("scatter-dots") 
    .data(ydata) // using the values in the ydata array 
    .enter().append("svg:circle") // create a new circle for each value 
     .attr("cy", function (d) { return y(d); }) // translate y value to a pixel 
     .attr("cx", function (d,i) { return x(xdata[i]); }) // translate x value 
     .attr("r", 10) // radius of circle 
     .style("opacity", 0.6); // opacity of circle

: 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>The d3 test</title> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js" charset="utf-8"></script> 
    </head> 
    <body> 
    <div class='content'> 
     <!-- /the chart goes here --> 
    </div> 
    <script type="text/javascript" src="scatterchart.js"></script> 
    </body> 
</html

kaynak

2012-05-04 05:06:20 Bill

+0

Teşekkürler ama bu gerçekten benim için çalışmıyor - 'flipy' nereden geldiğinden emin değil misiniz? – Richard

+0

Maalesef, örneğinin çalıştığını varsaydım. Cevabımı ve basitleştirilmiş şeyleri bazı şeyleri daha net hale getirmek için biraz güncelledim. Bunu http://bl.ocks.org/2595950 adresinde görebilirsiniz. – Bill

+0

Ah, şimdi çalışıyor, çok teşekkür ederim. – Richard

İlgili konular

 İlgili konular