Рисование нескольких связей между фиксированными узлами

Question

У меня есть график, ориентированный на силу, со ссылками между узлами. Теперь некоторые пары узлов имеют несколько ссылок, идущих друг к другу. Я нашел этот пример: Drawing multiple edges between two nodes with d3.

Это отлично работало, подумал я. Но если у вас есть фиксированные узлы и перетаскивание, пути заканчиваются перекрытием друг друга. Я собрал отредактированную версию этого примера:

Нажмите кнопку, чтобы исправить узлы и переместить их, чтобы увидеть, что я имею в виду.

Код для разработки количество дуги:

//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: перекрытие происходит, когда радиус даны для дуги меньше, чем половина расстояния между узлами (то радиус увеличивается, чтобы достичь этого значения, и все дуги получают одинаковый радиус) ,