Vis.js zeigt kein Diagramm, wenn viele Knoten hinzugefügt werden

Question

Ich mache eine Web App, um Beziehungen zwischen Elementen mit Vis.js anzuzeigen, alles funktioniert einwandfrei, bis ich an den Punkt komme, an dem ~ 260 Knoten mit ~ 1200 Kanten angezeigt werden sollen zwischen ihnen.

Sobald ich zu dieser Anzahl von Knoten komme, zeigt das Diagramm nur eine Leerstelle und eine blaue Linie, sonst nichts. Sobald ich versuche zu zoomen, verschwindet die Linie und es ist alles weiß.

Wenn ich auf die Position der Knoten sehe, kann ich sehen, dass viele von ihnen in negativen oder sehr großen x, y Positionen sind (im Allgemeinen -300 für x und etwa 478759527705558300000 für y).

Ich habe versucht, um Physik zu deaktivieren. Die Grafik befindet sich im hierarchischen Modus, wobei die Ebenen im Code manuell festgelegt werden, die Ebenen jedoch korrekt sind.

Netzwerkoptionen (die improvedLayout Option war nur eine Möglichkeit, die ich im Internet gefunden, es ist nur das gleiche funktioniert, wenn ich es entfernen):

var options = { 
     layout: { 
      improvedLayout: false, 
      hierarchical: { 
       direction: direction, 
       sortMethod: "directed" 
      } 
     } 
    } 

Screenshot:

Answer 1

Ich habe hierarchische Layout-Grafik, die aus rund 615 Knoten und 614 Kanten besteht (mit Ausnahme von 40 ungeraden Cluster-Knoten, einige von ihnen Cluster von Clustern). Ich bin in dasselbe Problem mit visjs geraten.

Eine schnelle Sache, die mir geholfen hat, dieses Problem zu überwinden, war, die Methode network .stabilize() explizit mit einem Argument aufzurufen, das die Anzahl der Iterationen angibt. Standard-Iterationen sind 1000. Ich habe 10000 überschritten und das Diagramm hat sich selbst schön stabilisiert. Es dauerte noch ein paar Sekunden, mir ging es gut. Aber die Stabilisierungszeiten schießen hoch, als sich die Anzahl der Knoten auf ~ 1000 erhöht. Also habe ich angefangen, in visjs Code für die Lösung zu suchen.

Während ich in visjs Code sah, fand ich, dass innerhalb Funktion setupHierarchicalLayout() gibt es einen Aufruf an _condenseHierarchy(). Diese Methode versucht, Leerräume zwischen Knoten und Kanten zu minimieren (noch den Code vollständig zu verstehen). _condenseHierarchy() modifiziert Koordinaten eines Knotens. Siehe Y-Koordinate vor und nach dem Aufruf an _condenseHierarchy() unten:

(this.body.nodes["node-11"]).y 
1530 
(this.body.nodes["node-11"]).y 
64920 

Wenn ein Knoten eine entfernte Position wird es viele Iterationen (in stabilisieren) dauert es uns näher zu bringen mit anderen Knoten im Graphen. Ich habe _condenseHierarchy() deaktiviert und den Graphen gut dargestellt.

Ich bin sicher, Deaktivieren von _condenseHierarchy() würde einige andere Probleme bringen, wie ich weiter fortfahren. Ich werde etwas mehr Zeit damit verbringen, _condenseHierarchy() zu verstehen und zu experimentieren.

Answer 2

Um dieses Problem zu lösen Sie können hierarchische Layout-Parameter wie nodeSpacing, levelSeparation und treeSpacing anpassen. Hier ist ein Beispiel hierarchicalLayoutWithoutPhysics