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

问题描述

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

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

• 我使用 http：// bl。 ocks.org/d3noob/5155181 显示方向，
  小端点箭头将显示指向自己，但没有
  链接线。


• http://bl.ocks.org/GerHobbelt/3616279 确实允许自我
  引用，我甚至得到它与我的数据，但它是
  疯狂复杂

诀窍是绘制自链接作为一个弧的路径。我花了一些时间来处理 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），
 
 //默认正常边缘
 drx = dr，
 dry = dr，
 xRotation = 0，// degrees 
 largeArc = 0，// 1或0 
 sweep = 1; // 1或0 
 
 //自边缘
 if（x1 === x2& y1 === y2）{ 
 //使用这个角度来获得循环定向
 xRotation = -45; 
 
 //需要为1. 
 largeArc = 1; 
 
 //改变扫描以改变循环的方向
 // sweep = 0; 
 
 //使drx和dry不同，得到一个椭圆
 //而不是一个圆。
 drx = 30; 
 dry = 20; 
 
 //无论什么原因，如果开始
 //和圆弧的终点是相同的，那么圆弧收缩到一个点，所以kludge它。 
 x2 = x2 + 1; 
 y2 = y2 + 1; 
} 
 
返回M+ x1 +，+ y1 +A+ drx +，+ dry ++ xRotation +，+ largeArc + ，+ sweep ++ x2 +，+ y2; 
}）; 
  

这里是 a jsfiddle 演示了整个事情，并有一个截图：

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, 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.

解决方案

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力布局图 - 自链接节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！