将多边形添加到 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";
}

说“未捕获的类型错误：无法读取未定义的属性 'join'”
在我将多边形推到“顶点”之后，我没有调用这个函数，但无论如何都会出现错误......你能告诉我我做错了什么吗？

Answer 1

据我所知，该错误是由以下事实引起的：当您单击时，它期望绘制一条额外的路径，但是因为您的鼠标指针正好位于路径的边缘，所以值 ( d) 未定义。您会注意到黄色突出显示的区域仅在您移动鼠标指针后才会更新。

这为您提供了几个解决方案。

1. 隐藏错误。为此，您可以在 polygon 函数的开头添加 if (typeof d == 'undefined') return;。

2. 'Hacky' 解决方法 - 在重绘时修改鼠标位置。将vertices[0] = [vertices[0][0]- 5, vertices[0][1] + 5]; 添加到redraw 函数的开头。这将防止鼠标与新多边形发生冲突。请注意，-5 和 +5 是任意值。