Простой пример рассеяния в D3.js?

Я ищу пример того, как рисовать диаграмму рассеяния в D3.js.Простой пример рассеяния в D3.js?

Я не смог найти простой пример, просмотрев official D3.js examples (впечатляет, хотя они есть). Я просто хочу знать, как:

Жеребьевка и маркировать х- и у-осей
Жеребьевка разброс точек на графике.

Я нашел this example в этом D3 reusable library, но это гораздо сложнее, чем мне нужно, с внешними файлами, которые делают его трудно вытащить основные моменты. Может ли кто-нибудь указать мне на простой пример диаграммы рассеяния, чтобы начать?

Большое спасибо.

источник

2012-05-03 Richard

I никогда не использовал d3 раньше и отказался от попыток собрать рабочий пример. Кажется, вам нужно преобразовать данные и оси, чтобы сделать что-то обычное (по умолчанию ось y указывает вниз). Вот страницы, которые я использовал: http://alignedleft.com/tutorials/d3/making-a-scatterplot/ и http://bl.ocks.org/1166403 Надеюсь, они помогут! –

Это должно вас начать. Вы можете увидеть это в действии на http://bl.ocks.org/2595950.

// 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

источник

2012-05-04 05:06:20 Bill

Спасибо, но на самом деле это не работает для меня - не знаете, откуда приходит «флип»? – Richard

Простите, я предположил, что его пример работает. Я обновил свой ответ и упростил некоторые вещи, чтобы, надеюсь, сделать вещи более ясными. Вы можете видеть, как он работает на http://bl.ocks.org/2595950. – Bill

Ах, работает, сейчас, большое спасибо. – Richard

NVD3.js имеет большие примеры. Вам также необходимо будет включить их библиотеку или взглянуть на их реализацию. Взгляните на этот пример: диаграммы рассеяния http://nvd3.org/livecode/#codemirrorNav

источник

2012-12-29 20:17:56 Sherzod

Взгляните на этот пример с C3.js рассеивания (D3 основе): http://c3js.org/samples/chart_scatter.html

Вы можете чан размер радиуса, как это: http://grokbase.com/t/gg/c3js/14a7jfj28c/bubble-chart-with-changing-radius-size-in-c3-js

источник

2015-04-13 06:46:05

Простой пример рассеяния в D3.js?

ответ

Смежные вопросы