javascript - 在固定节点之间绘制多个链接

Question

我有一个力导向图，每个节点之间都有链接。现在一些节点对有多个相互连接的链接。我找到了这个例子:Drawing multiple edges between two nodes with d3 .

我觉得这很管用。但是如果你有固定的节点并拖动，路径最终会相互重叠。我整理了这个例子的编辑版本:http://jsfiddle.net/thatOneGuy/7HZcR/502/

单击按钮固定节点并四处移动它们以了解我的意思。

计算弧度的代码:

//sort links by source, then target
links.sort(function(a,b) {
    if (a.source > b.source) {return 1;}
    else if (a.source < b.source) {return -1;}
    else {
        if (a.target > b.target) {return 1;}
        if (a.target < b.target) {return -1;}
        else {return 0;}
    }
});
//any links with duplicate source and target get an incremented 'linknum'
for (var i=0; i<links.length; i++) {
    if (i != 0 &&
        links[i].source == links[i-1].source &&
        links[i].target == links[i-1].target) {
            links[i].linknum = links[i-1].linknum + 1;
        }
    else {links[i].linknum = 1;};
};

谁能想出另一种方法来做这件事或解决这个问题？我可以在两个节点之间有 3 个甚至 4 个链接。

Answer 1

重要的代码是给出圆弧半径的代码。我提出以下功能:

path.attr("d", function(d) {
 var curve=2;
 var homogeneous=3.2;
 var dx = d.target.x - d.source.x,
     dy = d.target.y - d.source.y,
     dr = Math.sqrt(dx*dx+dy*dy)*(d.linknum+homogeneous)/(curve*homogeneous);  //linknum is defined above
 return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});

主要区别在于它随节点距离线性缩放(我认为这是最好的)。然后，有这两个参数，我称之为 curve 和 homogeneous:您应该使用它们直到找到合适的值。

参见 http://jsfiddle.net/7HZcR/504/

PS:当给定的圆弧半径小于节点之间距离的一半时(然后增加半径以达到该值，并且所有圆弧的半径相同)，就会发生重叠。