d3 힘 : 노드 사이의 링크가 호인 링크의 텍스트 위치 계산

Question

텍스트에 링크를 적용하는 한 가지 방법은 텍스트 요소에 force.links() 배열을 사용하고 링크의 중간 점에 텍스트를 가운데에 배치하는 것입니다.

두 개의 노드 사이에 두 개의 링크가 있다는 것을 확실히하기 위해 중간 점에서 구부러진 경로로 렌더링 된 양방향 링크가있는 일부 노드가 있습니다.

이러한 양방향 링크의 경우 텍스트를 이동하여 절곡 경로 위에 올바르게 놓습니다.

이렇게하려면 링크의 중심점을 중심으로하는 원과 그 중심을 통과하는 링크에 수직으로 이어지는 선의 교차점을 계산하려고 시도했습니다. 교장 선생님은 이것이 의미가 있다고 생각합니다. 반쯤 작동하는 것으로 보입니다.하지만 어떤 좌표에 교차점을 계산하여 반환했는지 정의 할 수있는 방법을 모르겠습니다. 어떤 레이블에 적용 할 것인지, 곡선 링크 사이에서 점프를 멈추게하는 방법을 설명합니다. 주변 노드를 이동하십시오 (jsfiddle - https://jsfiddle.net/sL3au5fz/6/ 참조).

function calcLinkTextCoords(d,coord, calling) { 
    var x_coord, y_coord;   
    //find centre point of coords 
    var cp = [(d.target.x + d.source.x)/2, (d.target.y + d.source.y)/2];  
    // find perpendicular gradient of line running through coords 
    var pg = -1/((d.target.y - d.source.y)/(d.target.x - d.source.x)); 
    // define radius of circle (distance from centre point text will appear) 
    var radius = Math.sqrt(Math.pow(d.target.x - d.source.x,2) + Math.pow(d.target.y - d.source.y,2))/5 ;  
    // find x coord where circle with radius 20 centred on d midpoint meets perpendicular line to d. 
    if (d.target.y < d.source.y) { 
     x_coord = cp[0] + (radius/Math.sqrt(1 + Math.pow(pg,2))); 
    } else { 
     x_coord = cp[0] - (radius/Math.sqrt(1 + Math.pow(pg,2))); 
    }; 
    // find y coord where x coord is x_text and y coord falls on perpendicular line to d running through midpoint of d 
    var y_coord = pg * (x_coord - cp[0]) + cp[1]; 
    return (coord == "x" ? x_coord : y_coord); 
}; 

어떤 도움이 상기 수정 또는이 인정 될 것이다 달성하는 또 다른 방법을 제안 중 하나는 다음과 같이

아크 경로에 텍스트의 좌표를 계산하는 함수이다.

덧붙여서 필자는 textPath를 사용하여 내 텍스트를 내 링크에 연결하려고 시도했지만 30-40 노드와 링크를 상향 표시 할 때 해당 메서드가 성능을 발휘하지는 않습니다.

업데이트 : 위 기능을 수정했으며 이제 의도 한대로 작동합니다. 여기에 업데이트 바이올린 : https://jsfiddle.net/o82c2s4x/6/

Answer 1

당신은 x와 y 축에 코드의 투사를 계산하고 소스 노드에 추가 할 수 있습니다 좌표 :

여기

function calcLinkTextCoords(d,coord) { 

     //find chord length 
     var dx = (d.target.x - d.source.x); 
     var dy = (d.target.y - d.source.y); 
     var chord = Math.sqrt(dx*dx + dy*dy); 

     //Saggita 
     // since radius is equal to chord 
     var sag = chord - Math.sqrt(chord*chord - Math.pow(chord/2,2)); 

     //Find the angles 
     var t1 = Math.atan2(sag, chord/2); 
     var t2 = Math.atan2(dy,dx); 
     var teta = t1+t2; 

     var h = Math.sqrt(sag*sag + Math.pow(chord/2,2)); 

     return ({x: d.source.x + h*Math.cos(teta),y: d.source.y + h*Math.sin(teta)}); 

    }; 

업데이트 된 JsFiddle