绘制固定节点之间的多个链接 [英] Drawing multiple links between fixed nodes

问题描述

我有一个力有向图，每个节点之间有链接。现在一些节点对具有到彼此的多个链接。我找到了这个例子：用d3描绘两个节点之间的多个边a>。

I have a force directed graph with links between each nodes. Now some node pairs have multiple links going to each other. I have found this example : Drawing multiple edges between two nodes with d3.

这工作的很好，我想。但是如果你有固定的节点和拖动，路径最终会相互重叠。我已将此示例的编辑版本放在一起： http://jsfiddle.net/thatOneGuy/7HZcR/502 /

This worked great, I thought. But if you have fixed nodes and drag, the paths end up overlapping each other. I have put together an edited version of this example : http://jsfiddle.net/thatOneGuy/7HZcR/502/

单击按钮修复节点并移动它们以查看我的意思。

Click the button to fix the nodes and move them around to see what I mean.

用于计算出弧的代码：

//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链接在两个节点之间。

Can anyone think of another way of doing this or fixing this way maybe ? I could have 3 maybe even 4 links between two nodes.

推荐答案

重要的代码是给出圆弧半径的代码。我建议以下函数：

The important code is the one giving the radius of the arc. I propose the following function:

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

主要区别是它与节点距离成线性比例（我认为最好）。然后，有两个参数，我调用曲线和 homogeneous ：你应该玩它们，直到找到合适的值。

The main difference is that it scales linearly with the node distance (which I think is best). Then, there are these two parameters which I call curve and homogeneous: you should play with them until you find suitable values.

请参阅 http://jsfiddle.net/7HZcR/ 504 /

PS：当为圆弧指定的半径小于节点之间的距离的一半时，会发生重叠（然后半径增加到这个值，所有弧都得到相同的半径）。

PS: the overlap happens when the radius given for the arc is smaller than half the distance between the nodes (then the radius is increased to reach this value, and all arcs get the same radius).

这篇关于绘制固定节点之间的多个链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！