d3.js - D3 Force Layout Graph - 自链接节点

Question

使用力有向图，当目标和源是同一个节点时，如何获得实际显示的链接。所以基本上只是一个很好的小循环，表明存在这样的边缘。

有两个我已经使用或尝试使用的 D3 示例：

• 我正在使用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和一个屏幕截图：