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

我是d3.js新手，我发现D3API提供了通过方法

getPointAtLength（l）

获取特定长度svg点的方法，但我正在寻找一种方法来计算d3中特定点的路径长度

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

没有简单的方法可以做到这一点，比如SVG

getPointAtLength

方法。但是，使用

getTotalLength（）

很容易获得

路径的总长度

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

这是一个工作示例：

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


在这里，我假设沿着
x
轴的点是有序的，因此当我从事件处理程序获得mouseover 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); 

关于插值的注记
该方法在不使用时有效。但是，如果替换，例如，
.interpolate（“无”）.interpolate（“单调”）。这是因为在某些情况下，子路径不会正确地遵循完整路径，例如：


始终适用于插值直线的解决方案可能要复杂得多

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