d3.js - D3 フォース レイアウト グラフ - 自己リンク ノード

Question

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

私がすでに使用した、または使用しようとした D3 の例が 2 つあります。

• 方向を示すためにhttp://bl.ocks.org/d3noob/5155181を使用しています。小さなエンドポイントの矢印がそれ自体を指して表示されますが、リンク ラインは表示されません。
• http://bl.ocks.org/GerHobbelt/3616279は自己参照を許可しており、自分のデータで動作させることさえできましたが、非常に複雑です。

Answer 1

コツは、自己リンクを円弧のあるパスとして描くことです。物事を機能させるには、アークパラメーターの構文を少しいじる必要がありました。キーは、アークが同じポイントで開始および終了できないことであると思われました。以下は、更新ごとにエッジを描画する関連コードです。

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;
});

そして、ここにすべてを示すjsfiddleとスクリーンショットがあります。