D3 Force布局图 - 自连接节点

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演示了整个事情，并截图：