javascript - 将多边形添加到 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. 隐藏错误。您可以通过将 if (typeof d == 'undefined') return; 添加到 polygon 函数的开头来实现此目的。

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