D3.Graf skierowany siłą js, zmniejsz przekroje krawędzi, sprawiając, że krawędzie odpychają się nawzajem

Czymś, co może być łatwiejsze niż próba silnego odparcia krawędzi, jest poruszanie węzłami wokół, aż ilość przecinających się linii w systemie będzie niższa.

Http://en.wikipedia.org/wiki/Simulated_annealing

Zacznij od węzłów z najmniejszą liczbą połączeń i poruszaj się w dół.

Jeśli spróbujesz użyć krawędzi jako węzłów, podejrzewam, że będziesz miał te same problemy z blokowaniem przestrzennym. Rozwiązaniem jest ustalenie, gdzie znajdują się krawędzie skrzyżowań i jeśli można je rozwiązać. Może się okazać, że rozwiązywanie wielu przejść granicznych nie jest możliwe

Bardziej bocznym podejściem do wizualizacji jest animowanie jej w taki sposób, aby pokazywała tylko podzbiór węzłów i połączeń naraz. Lub aby krawędzie były przezroczyste, dopóki użytkownik nie umieści ostrości myszy nad węzłem, co oznacza, że powiązane krawędzie stają się bardziej widoczne.

Poszedłem za przykładem edytora Force i zobaczyłem, że ustawienie wartości charge i linkDistance rozwiązuje problem.

  ...
  .charge(-200)
  .linkDistance(50)
  ...

Zrzut ekranu:

Mam "rozwiązany" problem z tym:

nodes[0].x = width / 2;
nodes[0].y = 100;
nodes[0].fixed = true;
force.on("tick", function(e) {

    var kx = .4 * e.alpha, ky = 1.4 * e.alpha;
    links.forEach(function(d, i) {
      d.target.x += (d.source.x - d.target.x) * kx;
      d.target.y += (d.source.y + 80 - d.target.y) * ky;
    });
    [...]
 }

Http://mbostock.github.io/d3/talk/20110921/parent-foci.html

nodes[0].fixed = true;