uniknąć kolizji między węzłami i krawędzi w D3 układ sił

Question

W tym przykładzie: http://bl.ocks.org/mbostock/1747543:

... Mike pokazuje nam, jak uniknąć kolizji między węzłami tak, że żadne dwa węzły nakładają się na siebie.

Zastanawiam się, czy można uniknąć kolizji między węzłami i krawędziami, tak aby żaden węzeł nie "zakleszczył" ani nie zachodził na krawędź, chyba że jest połączony z tą krawędzią.

Poniższy przykład za pomocą D3 siły bezpośrednio wynika, że ​​węzeł L pokrywa się z krawędzią łączącą I i A, i podobnie, węzeł M pokrywa się z krawędzią łączącą L i D. Jak zapobiegamy takim przypadkom?

Answer 1

Jeśli wykres nie ma zbyt wiele węzłów, można go fałszywy. Wystarczy wstawić jeden lub więcej węzłów dla każdego łącza i ustawić ich pozycję wzdłuż łącza w procedurze obsługi tick. Sprawdź http://bl.ocks.org/couchand/7190660 dla przykładu, ale zmiany w ilości wersji Mike Bostock do w zasadzie tylko:

var linkNodes = []; 

graph.links.forEach(function(link) { 
    linkNodes.push({ 
    source: graph.nodes[link.source], 
    target: graph.nodes[link.target] 
    }); 
}); 

i

// force.on('tick', function() { 
linkNodes.forEach(function(node) { 
    node.x = (node.source.x + node.target.x) * 0.5; 
    node.y = (node.source.y + node.target.y) * 0.5; 
}); 

ten wprowadzi dość poważne obciążenie wydajności jeśli masz bardzo wiele węzłów i krawędzi , ale jeśli Twój wykres nie będzie dużo większy niż twój przykład, nie zostanie zauważony.

Możesz także chcieć bawić się siłą względną rzeczywistych węzłów w porównaniu do węzłów łącza.

Wykonaj kolejny krok, aby uzyskać ładne zakrzywione linki o rozmiarze http://bl.ocks.org/mbostock/4600693.