javascript - 在 d3.js 中，有没有办法获得特定点的路径长度？

Question

我是 d3.js 的新手，我发现 d3 api 提供了通过方法 getPointAtLength(l) 获取特定长度的 svg 点的方法，但我正在寻找一种计算方法d3中特定点的路径长度？

如果有任何建议，请分享。

Answer 1

没有像 SVG getPointAtLength 方法那样简单 的方法来做到这一点。然而，使用 getTotalLength() 很容易获得 path 的总长度。

鉴于此，我建议的选项是绘制一条新路径，沿着现有路径到达新点。

这是一个工作示例:http://jsfiddle.net/henbox/b4bbgdnz/5/

将鼠标悬停在现有细黑色路径上的选定点上会导致绘制一条“子路径”(红色)直至选定点。下面的文本显示了选定的坐标和路径的长度从 (0,0)，第一个点到它。

这里我假设沿 x 轴的点是有序的，因此当我从事件处理程序中获取鼠标悬停 x 值时，我知道 x 低于该值的任何点都应该包含在子路径中。我将这些点以及鼠标悬停点坐标添加到一个新数组中，子路径将从中创建:

for (var i = 0; i < pathData[0].length; i++) {
    var coord = pathData[0][i];
    if ((coord.x <= mouse_coord.x)) {
        subPathData[0].push(coord);
    }
}

subPathData[0].push(mouse_coord); 

然后我计算子路径的长度:

subpath_length = d3.select(".subpath")[0][0].getTotalLength();

插值注意事项

该方法在不使用 line interpolation 时有效.但是，如果您在 jsfiddle 中将 .interpolate("none"); 替换为 .interpolate("monotone"); ，它将失败。这是因为在某些情况下子路径不会正确地遵循完整路径，例如:

始终对插值线起作用的解决方案可能会复杂得多