D3強制レイアウトグラフ - セルフリンクノード

Question

強制的なグラフを使用すると、ターゲットとソースが同じノードである場合に実際に表示されるリンクはどのようにして得られますか。基本的にちょっとしたループがあり、そのようなエッジが存在することを示しています。

私はすでに使用または使用しようとした2つの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、およびスクリーンショットです：