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

Question

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

如果有的话,请分享您的建议.

Answer 1

没有简单的方法可以做到这一点,比如SVG getPointAtLength方法.然而,它是容易得到的总长度path使用getTotalLength().

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

这是一个有效的例子: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();

插值注释

不使用线性插值时,该方法有效.但是,如果你更换,例如,它会失败.interpolate("none");与.interpolate("monotone");在的jsfiddle.那是因为子路径在某些情况下不会正确地遵循完整路径,如下所示:

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