D3.js 中的简单散点图示例？
Posted
技术标签:
【中文标题】D3.js 中的简单散点图示例？【英文标题】：A simple scatterplot example in D3.js? 【发布时间】：2012-05-13 12:21:42 【问题描述】：我正在寻找如何在 D3.js 中绘制散点图的示例。
我无法通过查看official D3.js examples 找到一个简单的示例（尽管它们令人印象深刻）。我只想知道如何：
绘制并标记 x 轴和 y 轴 在图表上绘制散点。我确实在这个D3 reusable library 中找到了this example，但它比我需要的要复杂得多，外部文件很难提取要点。谁能指点我一个简单的散点图示例来开始？
非常感谢。
【问题讨论】：
我以前从未使用过 d3，因此放弃了尝试组合一个工作示例。看来您需要转换数据和轴以使某些东西变得常规（默认的 y 轴指向下方）。以下是我使用的页面：alignedleft.com/tutorials/d3/making-a-scatterplot 和 bl.ocks.org/1166403 希望他们有所帮助！ 【参考方案1】：这应该可以帮助您入门。您可以在 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
【讨论】：
谢谢，但这并不适合我——不确定flipy 来自哪里？
对不起，我认为他的例子是有效的。我已经更新了我的答案并稍微简化了一些事情，希望能让事情变得更清楚。你可以在bl.ocks.org/2595950看到它的工作原理。
这听起来很荒谬......但我太新了，即使看到上面的内容也不会让我知道该怎么做。我复制 scatterplot.js 代码，其中“图表在此处”位于 .html 中？我不理会html并在同一目录中创建一个带有上述内容的scatterplot.js文件？无论出于何种原因，我看到的所有教程都只显示 .js 代码。我没有使用 javascript 的经验，甚至不知道如何处理它。是否有一个完整的 html 文件示例可以“正常工作”，以便我可以研究它？谢谢。
只需将html部分复制到一个名为index.html的文件中，并将javascript复制到一个名为scatterchart.js的文件中并将它们放在同一目录中。在浏览器（IE9+、FF、Chrome）中打开index.html，它应该可以正常工作。您可以查看bl.ocks.org/2595950 以了解它的外观。【参考方案2】：
NVD3.js 有很好的例子。您还需要包含他们的库或查看他们的实现。看看这个散点图的例子：http://nvd3.org/livecode/#codemirrorNav
【讨论】：
【参考方案3】：看看这个使用 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
【讨论】：
以上是关于D3.js 中的简单散点图示例？的主要内容，如果未能解决你的问题，请参考以下文章