d3 javascript，获取 svg 路径中​​两点之间的距离

Question

我有一组点，我通过这些点绘制了一条路径。

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;

    });

}

它有时有效（即使不准确）但有时不起作用，具体取决于数据。有没有更好的方法来获得距离？

Answer 1

这是一个使用 vanilla javascript 而不是 d3 的演示，但我希望你会发现它很有用。该函数getLengthForPoint(p,thePath)正在计算给定点 p 在路径上的距离。我正在设置一个变量let precision = 100;。根据路径的长度，您可能希望将此值更改为其他值。还要记住，一条路径可以多次通过同一个点。这可能很棘手，并且可能会给您带来错误。同样如您所知，您将获得到某个点的近似距离。在这个例子中，点p1 = {x:93.5,y:60}. 计算长度处的点具有以下坐标：{x:93.94386291503906,y: 59.063079833984375}// some points on the pathlet p1 = {x:93.5,y:60}let p2 = {x:165,y:106}//the total length of the pathlet pathLength = thePath.getTotalLength();let precision = 100;let division = pathLength / precision;function getLengthForPoint(p,thePath){&nbsp; &nbsp; let theRecord = pathLength;&nbsp; &nbsp; let theSegment;&nbsp; &nbsp; for (let i = 0; i < precision; i++) {&nbsp; &nbsp; // get a point on the path for thia distance&nbsp; &nbsp; let _p = thePath.getPointAtLength(i * division);&nbsp; &nbsp; // get the distance between the new point _p and the point p&nbsp; &nbsp; let theDistance = dist(_p, p);&nbsp; &nbsp; if (theDistance < theRecord) {&nbsp; &nbsp; // if the distance is smaller than the record set the new record&nbsp; &nbsp; &nbsp; theRecord = theDistance;&nbsp;&nbsp; &nbsp; &nbsp; theSegment = i;&nbsp; &nbsp; }&nbsp; }&nbsp; return(theSegment * division);&nbsp; }let theDistanceOnThePath = getLengthForPoint(p1,thePath);//if you calculate the coords of a point at the calculated distance you'll see that is very near the point&nbsp;console.log(thePath.getPointAtLength(theDistanceOnThePath));let theDistanceBetween2PointsOnThePath = getLengthForPoint(p2,thePath) - getLengthForPoint(p1,thePath);// a helper function to measure the distance between 2 pointsfunction dist(p1, p2) {&nbsp; let dx = p2.x - p1.x;&nbsp; let dy = p2.y - p1.y;&nbsp; return Math.sqrt(dx * dx + dy * dy);}svg{border:solid}<svg viewBox="0 10 340 120"><path id="thePath" fill="none" stroke="black" d="M10, 24Q10,24,40,67Q70,110,93.5,60Q117,10,123.5,76Q130,142,165,106Q200,70,235,106.5Q270,143, 320,24"></path>&nbsp; <circle cx="93.5" cy="60" r="2" fill="red"/>&nbsp; <circle cx="165" cy="106" r="2" fill="red"/></svg>要获得路径上两点之间的距离，您可以执行以下操作：let theDistanceBetween2PointsOnThePath = getLengthForPoint(p2,thePath) - getLengthForPoint(p1,thePath);