D3 Collapsible Force Layout Hinzufügen von Knoten zum Layout dynamisch

Question

Ich habe einige Probleme mit dem Hinzufügen von Knoten dynamisch in meinem zusammenklappbaren Force-Layout. Mein Datensatz wird dynamisch erstellt, so dass sich das Objekt jedes Mal ändert, wenn das Force-Layout erstellt wird. Daher habe ich ein Beispiel aus einem D3-Mobostock verwendet, bei dem ein lokales Objekt verwendet wurde, anstatt einen JSON als Startpunkt zu laden.

Ich habe Pan + Zoom hinzugefügt, aber das Hinzufügen eines Knotens scheint nicht zu funktionieren. Ich habe ein statisches Objekt (zu Testzwecken) und meine addNode-Funktion wird beim Klick auf einen Knoten aufgerufen. Ich versuche, die Knoten hinzuzufügen durch: var childrenTest=[ {"name": "Title", "size": 3938}, {"name": "Title", "size": 3938}, {"name": "Title", "size": 3938} ];

g.data.children[1].children = childrenTest; und dann die update(); ausgeführt, die die Daten zum Zusammenlegen und schaffen Verbindungen zwischen den Knoten vor dem Update um sie glätten soll.

Leider scheint es, dass wenn ich dies tue, es bricht vollständig meine Grafik erstellen einen schwebenden Cluster Offset von meinem Haupt-Graphen und Links und Knoten fehlen. Ich habe mich gefragt, ob ich Hilfe bekommen könnte, um herauszufinden, warum die Knoten nicht richtig hinzugefügt werden. Hier

ist ein Beispiel für meinen Code: https://jsfiddle.net/Diffusion_net/hu6t2ywb/9/

(Hinweis: Die addnode Funktion wird nur den Knoten auf kinderlos Knoten Klick einmal hinzufügen, aufgrund der Prüfung für Testzwecke)

Danke

Answer 1

Beim dynamischen Hinzufügen neuer Knoten besteht der Schlüssel darin, die IDs (siehe Ihre Abflachungsfunktion, die den Knoten wie diesem -> nodes.id = ++ i; ids zuweist) neu erstellten Knoten so zuzuordnen, dass sie es sind sollte eindeutig sein und sollte nicht mit den vorhandenen IDs der Knoten (die bereits auf dem Layout vorhanden sind) überlappen. Andernfalls kann dies zu unvorhersehbaren Verhaltensweisen führen, wie in Ihrem Fall.

Eine Möglichkeit, dies zu berücksichtigen, besteht darin, sich daran zu erinnern, wie viele Knoten bereits im Layout vorhanden sind, damit Sie den neu erstellten Knoten neue ID-Werte zuweisen können. Siehe unten die geänderte Abflachungsfunktion.

var alreadyNodes = 0; //no of nodes already present on the layout 
    function flatten(data) { 
    console.log(data); 
    var nodes = [], 
    i = alreadyNodes; //offset to the node id 
    var flattenNodes = 0; //no of nodes flatten under the current node 
     //count only children (not _children) 
     //note that it doesn't count any descendents of collapsed _children 
     //rather elegant? 
    function recurse(node) { 
      if (node.children) node.children.forEach(recurse); 
      if (!node.id) { 
       node.id = ++i; 
       flattenNodes++; 
      } 
      nodes.push(node); 
    } 
    recurse(data); 
     //Done: 
    alreadyNodes = alreadyNodes + flattenNodes; 
    return nodes; 
} 

Hier alreadyNodes speichert die Anzahl der Knoten, die bereits auf dem Layout und flattenNodes zählt die Anzahl der Knoten mit dem Layout hinzugefügt werden. alreadyNodes wird vor dem Zurückgeben der Knoten aktualisiert (letzte Zeile). Überprüfen Sie, wie bei jedem Aufruf von flatten ein Offset zur ID gegeben wird, der sicherstellt, dass neue Knoten neue IDs erhalten.

Ich hoffe, das hilft.