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

2024-04-27 • 问答

我有一组点可以画出一条路径。

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

我现在想要获取点之间路径的距离，以便可以将其分为多个部分。我尝试增加距离并检查点（四舍五入）是否与初始点集匹配，从而在有匹配时获取距离。然后，我将这些点保存到列表中。

在这里，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,thePath)正在计算给定点p在路径上的距离。我正在设置变量let precision = 100;。根据路径的长度，您可能需要将此值更改为其他值。

还要记住，一条路径可以多次通过同一点。这可能很棘手，并且可能会给您带来错误。

您也可能知道到点的大致距离。在此示例中，点p1 = {x:93.5,y:60}。计算长度处的点具有以下坐标：{x:93.94386291503906,y: 59.063079833984375}

// some points on the path
let p1 = {x:93.5,y:60}
let p2 = {x:165,y:106}
//the total length of the path
let pathLength = thePath.getTotalLength();
let precision = 100;
let division = pathLength / precision;

function getLengthForPoint(p,thePath){
    let theRecord = pathLength;
    let theSegment;
    for (let i = 0; i < precision; i++) {
    // get a point on the path for thia distance
    let _p = thePath.getPointAtLength(i * division);
    // get the distance between the new point _p and the point p
    let theDistance = dist(_p,p);
    if (theDistance < theRecord) {
    // if the distance is smaller than the record set the new record
      theRecord = theDistance; 
      theSegment = i;
    }
  }
  return(theSegment * division);
  }


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 
console.log(thePath.getPointAtLength(theDistanceOnThePath));


let theDistanceBetween2PointsOnThePath = getLengthForPoint(p2,thePath) - getLengthForPoint(p1,thePath);





// a helper function to measure the distance between 2 points
function dist(p1,p2) {
  let dx = p2.x - p1.x;
  let dy = p2.y - p1.y;
  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>
  <circle cx="93.5" cy="60" r="2" fill="red"/>
  <circle cx="165" cy="106" r="2" fill="red"/>
</svg>

要获取路径上2个点之间的距离，您可以执行以下操作：

let theDistanceBetween2PointsOnThePath = getLengthForPoint(p2,thePath);

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

a21221266 回答：d3 JavaScript，获取svg路径中两点之间的距离

大家都在问