D3 Force Layout Graph - Kendiliğinden bağlanan düğüm

Question

Kuvvet yönelimli bir grafik kullanarak, hedef ve kaynak aynı düğümdeyken gerçekten görünecek bir bağlantıyı nasıl alırsınız. Yani temelde böyle bir kenarın var olduğunu belirten güzel küçük bir döngü.

Zaten Kullanılmayan ya da denedi iki D3 örneği vardır:

Ben yönünü göstermek için http://bl.ocks.org/d3noob/5155181 kullanıyorum
• ve küçük uç nokta ok kendisi işaret görünecektir, ancak hiçbir bağlantı hat.
• http://bl.ocks.org/GerHobbelt/3616279, self referansı için izin verir ve hatta benim veri ile çalışmak için var, ama bu çılgın karmaşıktır.

Answer 1

hüner içinde bir yay ile bir yol olarak kendini linki çekmektir. Çalışmak için arc parameter syntax ile biraz uğraştım ve anahtarın aynı noktada başlayamadığı ve bitmediği görülüyordu. Her güncellemede kenarları çizen ilgili kod İşte.

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

Ve burada her şeyi gösteriyor a jsfiddle ve bir ekran görüntüsü ise: