与Voronoi的d3折线图

时间:2014-06-18 14:43:25

标签: d3.js

我正在尝试在自己的工作中使用以下代码;

http://bl.ocks.org/mbostock/8033015

我几乎可以使用它,但鼠标代码的行为与示例代码的行为方式不同。

我确保将该行插入基础数据中;

svg.selectAll('.line') .data(data) .enter() .append("path") .attr("class", "line") .attr('stroke', function(d,i){return colors[i%colors.length];}) .attr("d", function(d) { ** d.line = this; ** return line(d.values)});

然后根据示例代码生成voroni数据;

 var vr = (voronoi(d3.nest()
               .key(function(d) { return x(d.timestamp) + "," + y(d.attainment) + y(d.dcuid); })
               .rollup(function(v) { return v[0]; })
               .entries(d3.merge(data.map(function(d) { return d.values; })))
               .map(function(d) { return d.values; })));

但是当我想在voronoi鼠标中查看增强数据时,我的问题就出现了 - 线对象不再存在。

voronoiGroup.selectAll(".line")
 .data(vr)
 .enter().append("path")
 .attr("d", function(d) {return "M" + d.join("L") + "Z";})
 .datum(function(d) {return d.point; })
 .on("mouseover", function(d){alert(d.line)})

在演示代码中,警报可以正常工作。

我在这里拼凑了一个问题;

http://jsfiddle.net/CCpPQ/2/

0 个答案:

没有答案