D3 Aktualisierung Graph mit neuen Elementen erstellen Kanten mit den falschen Knoten
Mein Code erstellt ein Diagramm und erstellt einen Drehpunkt auf jedem Knoten. Wenn Sie darauf doppelklicken, werden weitere mit diesem Knoten verknüpfte Daten abgerufen und hoffentlich neue Verknüpfungen erstellt. Hier ist das Problem, auf das ich stoße:
Ich habe auf einen der äußersten Knoten geklickt, aber aus irgendeinem Grund wurden die neuen Links an den ersten Knoten (den blauen) angehängt. Irgendeine Idee, warum das passiert?
%Vor%BEARBEITEN: Nach weiteren Untersuchungen scheint es, als würde es die bestehenden Knotenverbindungen durch die neuen Daten ersetzen und neue potentiell doppelte Knoten erzeugen.
%Vor%Ich habe eine ID hinzugefügt, um mit der Knotenverdopplung fertig zu werden, aber jetzt habe ich ein Problem mit der Verschiebung der Indexwurzel.
1 Antwort
Es scheint, dass das Problem, das Sie haben, darauf zurückzuführen ist, dass Ihre Daten in der Data-Join-Funktionalität von D3 dupliziert werden. Es ist wahrscheinlich, dass der beste Weg zur Lösung des Problems darin besteht, für jeden Knoten in Ihren Daten eine "UUID / GUID" zu erstellen, bevor D3 sie bindet (siehe hier für ein Beispiel). Sobald Sie dies getan haben, können Sie die Daten binden und die Schlüsselspezifikationsfunktion des Datenjoins verwenden (siehe hier für eine Erklärung), um D3 mitzuteilen, die UUID / GUID-Werte zu verwenden, die Sie für jedes Objekt erstellt haben, um Konsistenz zu gewährleisten. Von dort sollten Sie in der Lage sein, die Eltern-Kind-Beziehungen einfacher zu handhaben.
Bearbeiten # 1
Da dies für die doppelten Werte funktioniert hat, liegt das nächste Problem wahrscheinlich darin, dass der Verweis auf das "source" -Objekt nicht so eingerichtet ist, wie D3 es erwarten würde. In D3 ist die "source" -Eigenschaft der Verknüpfung eine Referenz auf das eigentliche Quellenobjekt, wo Sie nur den ID-Wert angeben (siehe hier für die D3v4 Docs-Referenz. Versuchen Sie, den Verweis auf das tatsächliche Quellobjekt innerhalb des Arrays bereitzustellen, und das sollte es beheben.
Bearbeiten Sie # 2
Sie haben Recht damit, dass Sie mit NEW-Daten arbeiten, die in die Visualisierung kommen, aber ich glaube nicht, dass Sie EXISTING oder OLD behandeln (also Datenpunkte, die nicht mehr relevant sind und die Knoten / Links sein müssen) entfernt). Versuchen Sie in diesem Fall, Ihren Code mit dem folgenden Beispiel von Mike Bostock (dem ursprünglichen Ersteller der D3.js-Bibliothek) zu aktualisieren: hier und erst danach berichten. Es ist möglich, dass die neuen Knoten, die Sie sehen, einfach die älteren Knoten sind, die entfernt werden müssen, da sie nicht mehr an die Kinder gebunden sind. Daher sieht D3js sie als "neue" oder "existierende" Knoten, die tatsächlich sein müssen entfernt.
Tags und Links javascript d3.js