charts - 如何从 d3.js 模板“可重用图表”制作点图

Question

我正在尝试使用@mbostock 描述的“可重用图表”方法<path>，使用线条 ( ) 时一切都很好。但是，当我尝试使用点 ( <circle>) 时，图表中只添加了一个元素并且它的格式不正确（错误cx和cy）。

我尝试的代码在 fiddle 的第 50-55 行之间。我试图为每个数据在我的 svg 中附加一个圆圈，但没有添加。

Answer 1

第一个问题是 d3.svg.line 生成器需要一个数组作为输入，但是一个圆形元素只需要这个数组的一个值。因此，首先，您必须正确地进行数据绑定。

接下来，您需要正确使用秤。cx 和 cy 可以使用 X 和 Y 比例访问器函数。半径也需要一个比例，因为您的 xSpeed 包含负数并且半径不能为负数。所以这里是固定版本：http: //jsfiddle.net/christopheviau/2DDuH/6/

var speedScale = d3.scale.linear().domain(d3.extent(data.map(function(d, i){return d.xSpeed;}))).range([2, 10]);
            gEnter.selectAll('circle.dot')
                .data(function(d, i){return d})
                .enter().append("circle")
                .attr("class", "dot")
                .attr("cx", X)
                .attr("cy", Y)
                .attr("r", function(d, i){return speedScale(d.xSpeed)});