D3 힘 레이아웃 그래프 - 셀프 링킹 노드

Question

강제력 그래프를 사용하면 대상과 소스가 같은 노드 일 때 링크가 실제로 표시되게하려면 어떻게해야합니까? 그래서 근본적으로 멋진 작은 루프는 그런 가장자리가 존재 함을 나타냅니다.

이미 사용하는 데 사용하거나 노력이 개 D3 예제가 있습니다

나는 방향을 보여 http://bl.ocks.org/d3noob/5155181을 사용하고
• 및 작은 엔드 포인트 화살표를 자체를 가리키는 표시됩니다,하지만 링크 선.
• http://bl.ocks.org/GerHobbelt/3616279 자체는 을 참조 할 수 있으며 내 데이터와 함께 작동하도록되어 있어도 그렇지만 미친 듯합니다.

Answer 1

트릭은 자체 링크를 호가있는 경로로 그립니다. 물건을 작동 시키려면 arc parameter syntax을 조금 놀 랐고, 열쇠는 호가 같은 지점에서 시작하고 끝날 수없는 것처럼 보였습니다. 다음은 각 업데이트에서 가장자리를 그리는 관련 코드입니다.

function tick() { 
    link.attr("d", function(d) { 
    var x1 = d.source.x, 
     y1 = d.source.y, 
     x2 = d.target.x, 
     y2 = d.target.y, 
     dx = x2 - x1, 
     dy = y2 - y1, 
     dr = Math.sqrt(dx * dx + dy * dy), 

     // Defaults for normal edge. 
     drx = dr, 
     dry = dr, 
     xRotation = 0, // degrees 
     largeArc = 0, // 1 or 0 
     sweep = 1; // 1 or 0 

     // Self edge. 
     if (x1 === x2 && y1 === y2) { 
     // Fiddle with this angle to get loop oriented. 
     xRotation = -45; 

     // Needs to be 1. 
     largeArc = 1; 

     // Change sweep to change orientation of loop. 
     //sweep = 0; 

     // Make drx and dry different to get an ellipse 
     // instead of a circle. 
     drx = 30; 
     dry = 20; 

     // For whatever reason the arc collapses to a point if the beginning 
     // and ending points of the arc are the same, so kludge it. 
     x2 = x2 + 1; 
     y2 = y2 + 1; 
     } 

return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2; 
}); 

그리고 여기이 모든 일을 보여 a jsfiddle 및 스크린 샷입니다 :