Mike Bostock hat ein Beispiel zum Aktualisieren eines Force-Layouts. Das Beispiel basiert auf v3 - wie kann die gleiche Funktionalität in v4 repliziert werden?
Hier ist mein (erbärmlicher) Versuch .
Ich habe die Änderungen für die Auswahl in v4 gelesen Changelog, aber der Aufruf merge ist immer noch verwirrend. Insbesondere ist mir nicht klar, wie der Datenbeitritt mit der Simulation nodes() und links() ruf interagiert.
Sie brauchen also kein d3-selection-merge, damit Ihr Beispiel funktioniert. Der Grund dafür ist, dass Ihre Knotenpositionen und Verknüpfungen durch die Simulation aktualisiert werden. Daher sollten Sie die Knoten und Links beim Start hinzufügen, aber die Aktualisierung der Positionen erfolgt am Ende der Startmethode, wenn die Simulation gestartet wird.
Ein großer Fehler in Ihrem ursprünglichen Code war, dass Sie svg.selectAll ('. node') & amp; svg.selectAll ('. link') in den Anfangsstadien des Skripts. Wenn Sie dies tun, sind keine Knoten oder Links an die SVG gebunden, so dass Sie eine d3-Auswahl mit leeren DOM-Elementen erhalten. Dies ist in Ordnung, wenn Sie Elemente mit enter (). Append () hinzufügen möchten - aber beim Entfernen von Elementen wird dies nicht funktionieren. Mit der gleichen, veralteten d3-Auswahl, um Elemente mit exit () zu entfernen. Remove () funktioniert nicht b / c es gibt keine DOM-Elemente in der d3-Auswahl, die entfernt werden sollen. Sie müssen jedesmal svg.selectAll () aufrufen, um die DOM-Elemente zu erhalten, die sich gerade im svg befinden.
Ich habe auch ein paar kleinere Änderungen an Ihrem Code vorgenommen. Normalerweise möchten Sie, dass die Links immer unterhalb der Knoten angezeigt werden. Wenn Sie einem SVG Elemente hinzufügen, werden die zuletzt hinzugefügten Knoten an der Spitze platziert. Wenn Sie jedoch zuvor Gruppen hinzufügen (wie ich es im Code mit linkLayer und am nodeLayer getan habe), werden alle neu hinzugefügten Links unter allen Elementen in der nodeLayer-Gruppe angezeigt.
Tags und Links d3.js force-layout