D3 Force Layout Graph - 自链接节点

Question

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

我已经使用过或尝试使用过两个D3示例:

• 我正在使用http://bl.ocks.org/d3noob/5155181显示方向,小端点箭头将显示指向自身,但没有链接线.
• http://bl.ocks.org/GerHobbelt/3616279确实允许自我引用,我甚至可以使用它来处理我的数据,但它很复杂.

Answer 1

诀窍是将自链接绘制为带有弧的路径.我花了一些时间摆弄arc参数语法来使事情正常工作,关键似乎是弧不能在同一点开始和结束.以下是在每次更新时绘制边缘的相关代码.

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,以及截图: