Question

我有一个初始的点（对象）数组，我在我的图表上绘制，然后我想为鼠标事件创建一个voronoi覆盖。

我的点对象的形式:(小提琴线：4-12）

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

我的voronoi代码:(小提琴行：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()...返回numberOfPoints-4多边形。无论点数多少，前4个多边形都会丢失。如果点数为4或更少，则不返回多边形。

这是一个错误还是我的代码中有错误？

Answer 1

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

之后添加路径

我在附加路径中添加了一个class属性，然后只选择该类的所有路径。

Here is the corrected fiddle.

d3.geom.voronoi（）不返回enaugh多边形

1 个答案: