Javascript D3.js 中的一个简单散点图示例？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10440646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A simple scatterplot example in D3.js?
提问by Richard
I'm looking for an example of how to draw a scatterplot in D3.js.
我正在寻找如何在 D3.js 中绘制散点图的示例。
I haven't been able to find a simple example by looking through the official D3.js examples(impressive though they are). I just want to know how to:
通过查看官方的 D3.js 示例（尽管它们令人印象深刻），我无法找到一个简单的示例。我只想知道如何：
- draw and label the x- and y-axes
- draw scatter points on the graph.
- 绘制并标记 x 轴和 y 轴
- 在图形上绘制散点。
I did find this examplein this D3 reusable library, but it is much more complex than I need, with external files that make it hard to pull out the essential points. Could anyone point me at a simple scatterplot example to get started?
我确实在这个D3 可重用库中找到了这个例子，但它比我需要的复杂得多，外部文件使得很难提取要点。谁能指点我一个简单的散点图示例来开始？
Thanks very much.
非常感谢。
回答by Bill
This should get you started. You can see it in action at http://bl.ocks.org/2595950.
这应该让你开始。您可以在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
Used like this:
像这样使用：
<!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
回答by Sherzod
NVD3.js has great examples. You will need to include their library also or take a look at their implementation. Take a look at this example of scatterplot: http://nvd3.org/livecode/#codemirrorNav
NVD3.js 有很好的例子。您还需要包含他们的库或查看他们的实现。看看散点图的这个例子：http: //nvd3.org/livecode/#codemirrorNav
回答by Green Lei
Take a look at this example of scatterplot with C3.js (D3-based): http://c3js.org/samples/chart_scatter.html
看看这个带有 C3.js（基于 D3）的散点图示例：http://c3js.org/samples/chart_scatter.html
You can chang radius size like this : http://grokbase.com/t/gg/c3js/14a7jfj28c/bubble-chart-with-changing-radius-size-in-c3-js
您可以像这样更改半径大小：http: //grokbase.com/t/gg/c3js/14a7jfj28c/bubble-chart-with-changed-radius-size-in-c3-js
