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";
}

说＆＃34;未捕获的TypeError：无法读取属性＆＃39;加入＆＃39;未定义＆＃34;
将多边形推到＆＃34;顶点后＃34;我没有调用此功能，但错误仍然存在......你能告诉我我做错了什么吗？

Answer 1

这个错误，正如我所知，是由于当你点击它有一个额外的路径，它希望绘制，但因为你的鼠标指针恰好在路径的边缘上的值（ d）未定义。您会注意到黄色突出显示的区域仅在您移动鼠标指针后才会更新。

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

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

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

1 个答案: