D3 Force Layout Graph - 自链接节点

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演示了整个内容和截图：