D3.js中一个简单的散点图示例？

Question

D3.js中一个简单的散点图示例？

javascriptdata-visualizationd3.js

23

我正在寻找一个在D3.js中绘制散点图的示例。在查看官方D3.js示例（虽然很令人印象深刻）时，我没有找到一个简单的示例。我只想知道如何：

- 绘制和标记x轴和y轴 - 在图表上绘制散点。

我在这个D3可重用库中找到了这个示例，但它比我需要的要复杂得多，有外部文件，使得难以提取出关键点。有人能指引我一个简单的散点图示例吗？

非常感谢。

- Richard

我以前从未使用过d3，并放弃了尝试组合一个可工作的示例。似乎您需要转换数据和轴才能制作出传统的东西（默认y轴向下）。以下是我使用的页面：http://alignedleft.com/tutorials/d3/making-a-scatterplot/ 和 http://bl.ocks.org/1166403 希望它们有所帮助！ - Tina CG Hoehr

3个回答

1

NVD3.js拥有很棒的示例。您需要包含他们的库或查看他们的实现。请看这个散点图的示例：http://nvd3.org/livecode/#codemirrorNav

- Sherzod

0

看一下这个基于 D3 的 C3.js 散点图的示例：http://c3js.org/samples/chart_scatter.html

你可以像这样更改半径大小: http://grokbase.com/t/gg/c3js/14a7jfj28c/bubble-chart-with-changing-radius-size-in-c3-js

- Green Lei

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bill · Accepted Answer

这应该可以帮助你入门。你可以在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