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

Question

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

请分享您的建议。

Answer 1

没有简单的方式来执行此操作，例如SVG getPointAtLength方法。但是，使用path很容易获得getTotalLength()的总长度。

鉴于此，我建议的选项是绘制一条新路径，该路径遵循现有路径直至新点。

这是一个有效的例子：http://jsfiddle.net/henbox/b4bbgdnz/5/

将鼠标悬停在现有细黑路径上的选定点上会导致一个“子路径”＆＃39;要绘制（红色）直到选定的点。下面的文字显示了选择的坐标和路径的长度（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");，则会失败。这是因为子路径在某些情况下不会正确地遵循完整路径，如下所示：

总是在插值线上工作的解决方案可能会复杂得多