Ich möchte die Differenz zwischen dem aktuellen Datensatz und dem vorherigen Datensatz darstellen, wie vom Client berechnet.
Stellen Sie sich vor, ich habe bereits drei Kreise, die an die Daten [1, 2, 3] gebunden sind. Jetzt möchte ich die Daten aktualisieren und etwas basierend auf dem Unterschied zwischen den neuen Werten und den alten tun?
Hier ist ein JSFiddle mit dem obigen Code in einem Beispiel.
Sie haben zwei Möglichkeiten, die an ein Element angehängten alten Daten zu speichern, um Änderungen nach einem neuen Datenbeitritt zu identifizieren.
Die erste Option ist, wie Sie vorgeschlagen haben, die Verwendung von Datenattributen. Diese SO Q & A beschreibt diesen Ansatz . Dinge zu beachten:
Die zweite Option besteht darin, die Daten als JavaScript-Eigenschaft des DOM-Objekts für das Element zu speichern, genauso wie d3 speichert die aktiven Daten als __data__ -Eigenschaft . Ich habe diese Methode in diesem Forumbeitrag besprochen.
Der allgemeine Ansatz:
%Vor%Sie können natürlich einen beliebigen Namen für die alte Dateneigenschaft verwenden, es ist nur Konvention, eine Menge "_" -Zeichen um ihn herum zu werfen, um zu verhindern, dass die nativen DOM-Eigenschaften des Browsers durcheinander gebracht werden.
Ab D3 v4 können Sie die integrierte Unterstützung für lokale Variablen . Die interne Implementierung entspricht im Wesentlichen der Antwort von AmeliaBR , aber Sie müssen nicht mehr alte Daten speichern allein. Wenn Sie d3.local() verwenden, können Sie set einen Wert für einen bestimmten DOM-Knoten, daher der Name local . Im unteren Ausschnitt geschieht dies für jeden Kreis durch die Zeile
Sie können später den Wert für einen bestimmten Knoten abrufen gespeichert auf:
%Vor%Dieser vollständige Code könnte etwa so aussehen:
Tags und Links javascript d3.js