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

Question

我有一个力导向图,每个节点之间有链接.现在一些节点对有多个相互连接的链接.我找到了这个例子:用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:当为弧提供的半径小于节点之间距离的一半时(然后增加半径以达到该值,并且所有弧获得相同的半径),发生重叠.