D3 力布局图 - 自链接节点 [英] D3 Force Layout Graph - Self linking node

问题描述

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

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.

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

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

• 我正在使用 http://bl.ocks.org/d3noob/5155181显示方向，以及小端点箭头将显示指向自身，但没有链接线.
• http://bl.ocks.org/GerHobbelt/3616279 确实允许自我引用，我什至让它与我的数据一起工作，但它是疯狂的复杂.

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

推荐答案

诀窍是将自链接绘制为一条带有弧线的路径.我花了一些时间摆弄 arc 参数语法 使事情顺利进行，关键似乎是弧不能在同一点开始和结束.这是在每次更新时绘制边缘的相关代码.

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

这里是 一个 jsfiddle 演示了整个事情，还有一个截图:

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

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