我如何从d3.js模板制作点图表＆＃39;可重用图表＆＃39;

Question

我正在尝试使用@mbostock描述的'Reusable Charts' approach，使用一行（<path>）时一切正常。 但是，当我尝试使用点（<circle>）时，只有一个元素被添加到图表中并且格式不正确（错误cx和cy）。

我尝试的代码介于lines 50-55 of the fiddle之间。 我尝试为每个数据添加一个圆圈给我的svg，但是没有添加。

Answer 1

第一个问题是d3.svg.line生成器将数组作为输入，但是circle元素只需要该数组的一个值。首先，您必须正确地获取数据绑定。

接下来，您需要正确的比例。 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)});