D3力布局图 - 自链接节点

问题描述

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

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

• 我使用显示方向，
  小端点箭头将显示指向自己，但没有
  链接线。


• 确实允许自我
  引用，我甚至得到它与我的数据，但它是
  疯狂复杂

诀窍是绘制自链接作为一个弧的路径。我花了一些时间来处理演示了整个事情，并有一个截图：

Using a force directed graph, how do you get a link to actually show up when the target and source are the same node. So basically just a nice little loop indicating that such an edge exists.

There are two D3 examples that I already used or tried to use:

• I'm using http://bl.ocks.org/d3noob/5155181 to show direction, andthe little endpoint arrow will show up pointing at itself, but nolink line.
• http://bl.ocks.org/GerHobbelt/3616279 does does allow for selfreferencing and I even sort of got it to work with my data, but it iscrazy complicated.

解决方案

The trick is to draw the self link as a path with an arc in it. It took me a bit of fiddling with the arc parameter syntax to get things working and the key seemed to be that the arc could not start and end at the same point. Here is the relevant code that draws the edges at each update.

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

And here is a jsfiddle that demonstrates the whole thing, and a screenshot:

这篇关于D3力布局图 - 自链接节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！