Wykres układu siły D3 - węzeł samo łączący się

Question

Przy użyciu wykresu ukierunkowanego na siłę, w jaki sposób uzyskuje się łącze do rzeczywistego pojawienia się, gdy cel i źródło są tymi samymi węzłami. W zasadzie po prostu ładna mała pętla wskazująca, że ​​taka krawędź istnieje.

Istnieją dwa przykłady D3, że już stosowane lub próbował użyć:

• używam http://bl.ocks.org/d3noob/5155181 pokazać kierunek i mały punkt końcowy strzałki pojawi się wskazując na siebie, ale nie Link linia.
• http://bl.ocks.org/GerHobbelt/3616279 nie pozwala na samodzielne dodawanie , a ja nawet mam to do pracy z moimi danymi, ale to jest szalenie skomplikowane.

Answer 1

Sztuką jest narysowanie linku jako ścieżki z łukiem. Zajęło mi trochę manipulowanie z arc parameter syntax, aby działało, a kluczem wydawał się być to, że łuk nie mógł się rozpoczynać i kończyć w tym samym punkcie. Oto odpowiedni kod, który rysuje krawędzie przy każdej aktualizacji.

function tick() { 
    link.attr("d", function(d) { 
    var x1 = d.source.x, 
     y1 = d.source.y, 
     x2 = d.target.x, 
     y2 = d.target.y, 
     dx = x2 - x1, 
     dy = y2 - y1, 
     dr = Math.sqrt(dx * dx + dy * dy), 

     // Defaults for normal edge. 
     drx = dr, 
     dry = dr, 
     xRotation = 0, // degrees 
     largeArc = 0, // 1 or 0 
     sweep = 1; // 1 or 0 

     // Self edge. 
     if (x1 === x2 && y1 === y2) { 
     // Fiddle with this angle to get loop oriented. 
     xRotation = -45; 

     // Needs to be 1. 
     largeArc = 1; 

     // Change sweep to change orientation of loop. 
     //sweep = 0; 

     // Make drx and dry different to get an ellipse 
     // instead of a circle. 
     drx = 30; 
     dry = 20; 

     // For whatever reason the arc collapses to a point if the beginning 
     // and ending points of the arc are the same, so kludge it. 
     x2 = x2 + 1; 
     y2 = y2 + 1; 
     } 

return "M" + x1 + "," + y1 + "A" + drx + "," + dry + " " + xRotation + "," + largeArc + "," + sweep + " " + x2 + "," + y2; 
}); 

A oto a jsfiddle który pokazuje całą sprawę, a zrzut ekranu: