固定ノード間に複数のリンクを描く

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

は、誰もがこれを行うか、多分この方法を固定する別の方法を考えることはできますか？私は2つのノード間に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と呼ぶこれらの2つのパラメータがあります。適切な値が見つかるまでそれらを再生する必要があります。

PS http://jsfiddle.net/7HZcR/504/

を参照：円弧のために指定された半径は、ノード間の距離の半分よりも小さい場合、オーバーラップが発生し（その後半径がこの値に到達するように増加し、すべてのアークが同じ半径を得るされます） 。