D3JavaScript，获取svg路径中两点之间的距离

我有一组点，通过这些点我画了一条路径

let path=svg.append("path").attr("id","path")
        .data([points])
        .attr("d", d3.line()
        .curve(d3.curveCatmullRom));

现在，我想得到点之间的路径距离，这样我就可以将它分割成段。我尝试增加距离，检查点（四舍五入为5）是否与初始点集匹配，从而在匹配时获得距离。然后我将这些点保存到列表中

这里，

xyArray

有我附加的点列表

d

，还有列表

seg

function distanceBetween2Points(path, xyArray) {
    let distance = 0;
    xyArray.forEach(function(d,i)
    {
        let flag=1;
        seg=[];

        while(flag)
            {let pt=path.getPointAtLength(distance);
            if(round5(pt.x)==round5(d.x) && round5(pt.y)==round5(d.y))
                {console.log("d",i);
                d.d=distance;
                d.seg=seg;
                flag=0;
                break;}
            seg.push([pt.x,pt.y]);
            distance++;}
        return 0;
    });
}

---

它有时有效（尽管不准确），但有时无效，具体取决于数据。有没有更好的方法来获得距离？

这是一个使用香草javascript而不是d3的演示，但我希望您会发现它很有用

函数

getLengthForPoint（p，路径）

计算给定点p在路径上的距离。 我正在设置一个变量

let precision=100。根据路径的长度，您可能希望将此值更改为其他值

还要记住，路径可以多次通过同一点。这可能很棘手，可能会给你一个错误

另外，正如您可能知道的，您将获得到一个点的近似距离。在本例中，点
p1={x:93.5，y:60}
。计算长度处的点具有以下坐标：
{x:93.94386291503906，y:59.06307983984375}


//路径上的一些点
设p1={x:93.5，y:60}
设p2={x:165，y:106}
//路径的总长度
让pathLength=path.getTotalLength（）；
设精度=100；
设除法=路径长度/精度；
函数getLengthForPoint（p，路径）{
让记录=路径长度；
让这个片段；
for（设i=0；i

svg{border:solid}