将多边形添加到 d3 voronoi 导致错误

Question

我想扩展此示例 (http://bl.ocks.org/mbostock/4060366) 并创建一项功能，以便在用户单击一个多边形时将此多边形添加到其他多边形中（加上中间的点）。我添加了这些行

.on("click", function () {
            svg.append("circle").attr("transform", "translate(" + d3.mouse(this) + ")").attr("r", 1.5);
            vertices.push(d3.mouse(this));
        })

就在

之后

.on("mousemove",....

它起作用了——添加了多边形但是函数发生了奇怪的错误

    function polygon(d) {
    return "M" + d.join("L") + "Z";
}

说"Uncaught TypeError: Cannot read property 'join' of undefined"
在我将多边形推到 "vertices" 之后，我没有调用这个函数，但错误还是发生了......你能告诉我我做错了什么吗？

Answer 1

这个错误，据我所知，是由于当你点击时有一条额外的路径需要绘制，但是因为你的鼠标指针恰好在路径的边缘值 (d) 未定义。您会注意到黄色突出显示的区域仅在您移动鼠标指针后更新。

这为您提供了一些解决方案。

隐藏错误。您可以通过将 if (typeof d == 'undefined') return; 添加到 polygon 函数的开头来实现。
'Hacky' 解决方法 - 在重绘时修改鼠标位置。将 vertices[0] = [vertices[0][0]- 5, vertices[0][1] + 5]; 添加到 redraw 函数的开头。这将防止鼠标与新多边形发生冲突。请注意 -5 和 +5 是任意值。

将多边形添加到 d3 voronoi 导致错误

Adding polygon to d3 vornoi causing an error

javascript

polygon

vertices

d3.js