d3.geom.voronoi() 没有 return enaugh 多边形

Question

我在图表上绘制了一个初始点（对象）数组，然后我想为鼠标事件创建一个 voronoi 叠加层。

我的点对象的形式：（Fiddle行：4-12）

point {
    id: 'id',
    x: xCoordinate,
    y: yCoordinate
}

还有我的 voronoi 代码：（Fiddle 行：95-112）

var voronoi = d3.geom.voronoi()
    .x(function(d) {return x(d.x); })
    .y(function(d) {return y(d.y); })
    .clipExtent([[0,0],[w,h]]);

//Create the Voronoi grid
graph.selectAll("path")
    .data(voronoi(points))
    .enter().append("path")
    .attr("d",function(d){return "M" + d.join("L") + "Z";})
    .datum(function(d, i) { return d.point; })
    .attr("class", function(d,i) { return "voronoi " + d.id; })
    .style("stroke", "#000")
    .style("fill", "#2074A0")
    .style("opacity", ".3")
    .style("pointer-events", "all")
    .on("mouseover", function(d){document.getElementById('legend').innerHTML = d.id})
    .on("mouseout", function(d){document.getElementById('legend').innerHTML = ''});

问题是 var voronoi = d3.geom.voronoi()... returns numberOfPoints-4 多边形。无论点数如何，前 4 个多边形都会丢失。如果点数为 4 或更少，则不返回任何多边形。

这是错误还是我的代码有错误？

Answer 1

发现问题。问题在于 select 使用 graph.selectAll("path") 处理所有路径，而不仅仅是在 data(voronoi(points))

之后附加的路径

我向附加路径添加了一个 class 属性，然后 select 仅 class 的所有路径。

Here is the corrected fiddle.

d3.geom.voronoi() 没有 return enaugh 多边形

d3.geom.voronoi() does not return enaugh polygons

voronoi

d3.js