第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

d3 javascript,獲取 svg 路徑中??兩點(diǎn)之間的距離

d3 javascript,獲取 svg 路徑中??兩點(diǎn)之間的距離

眼眸繁星 2022-01-01 18:43:26
我有一組點(diǎn),我通過(guò)這些點(diǎn)繪制了一條路徑。let path=svg.append("path").attr("id","path")        .data([points])        .attr("d", d3.line()        .curve(d3.curveCatmullRom));我現(xiàn)在想獲得點(diǎn)之間路徑的距離,以便我可以將它分成幾段。我嘗試增加距離并檢查點(diǎn)(四舍五入到 5)是否與初始點(diǎn)集匹配,從而在匹配時(shí)獲得距離。然后我將點(diǎn)保存到那里作為列表。這里xyArray有我附加的點(diǎn)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;    });}它有時(shí)有效(即使不準(zhǔn)確)但有時(shí)不起作用,具體取決于數(shù)據(jù)。有沒(méi)有更好的方法來(lái)獲得距離?
查看完整描述

1 回答

?
胡說(shuō)叔叔

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊

這是一個(gè)使用 vanilla javascript 而不是 d3 的演示,但我希望你會(huì)發(fā)現(xiàn)它很有用。


該函數(shù)getLengthForPoint(p,thePath)正在計(jì)算給定點(diǎn) p 在路徑上的距離。我正在設(shè)置一個(gè)變量let precision = 100;。根據(jù)路徑的長(zhǎng)度,您可能希望將此值更改為其他值。


還要記住,一條路徑可以多次通過(guò)同一個(gè)點(diǎn)。這可能很棘手,并且可能會(huì)給您帶來(lái)錯(cuò)誤。


同樣如您所知,您將獲得到某個(gè)點(diǎn)的近似距離。在這個(gè)例子中,點(diǎn)p1 = {x:93.5,y:60}. 計(jì)算長(zhǎng)度處的點(diǎn)具有以下坐標(biāo):{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>


要獲得路徑上兩點(diǎn)之間的距離,您可以執(zhí)行以下操作:


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



查看完整回答
反對(duì) 回復(fù) 2022-01-01
  • 1 回答
  • 0 關(guān)注
  • 389 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)