D3: Daten mit mehreren Elementen in einer Gruppe aktualisieren

Question

Ich habe eine kombinierte Balken/Liniendiagramm. Für jede Zeile in der Eingabedatei, erstelle ich eine Gruppe, die mehrere Elemente (Linien, Rechtecke, Texte) enthält:

var myGroups = svg.selectAll('g').data(myData) 
myGroups.enter().append('g') 
... 
myGroups.append('line') 
... 
myGroups.append('polygon') 
... 
myGroups.append('text') 
... 

ich zur Zeit nur

svg.selectAll('*').remove() 

und schaffen alles von Grund auf die Daten jedes Mal, sind aktualisiert. Ich möchte jedoch einen reibungslosen Übergang für alle Elemente haben.

Ich habe durch this tutorial mehrmals gegangen, aber ich verstehe immer noch nicht, wie ich es in meinem Fall tun kann.

Answer 1

Der Schlüssel ist es, alle Auswahlen zu handhaben, nicht nur die Auswahl eingeben:

var myGroups = svg.selectAll('g').data(myData); 

// enter selection 
var myGroupsEnter = myGroups.enter().append("g"); 
myGroupsEnter.append("line"); 
myGroupsEnter.append("polygon"); 
// ... 

// update selection -- this will also contain the newly appended elements 
myGroups.select("line").attr(...); 
// ... 

// exit selection 
myGroups.exit().remove(); 

Es gibt zwei Dinge, die hier eine weitere Erklärung rechtfertigen. Zuerst werden Elemente in der Eingabeauswahl, an die neue Elemente angehängt wurden, in die Aktualisierungsauswahl eingefügt. Das heißt, es müssen keine Attribute für die Elemente in der Eingabeauswahl festgelegt werden, wenn dasselbe bei der Aktualisierungsauswahl geschieht. Auf diese Weise können Sie neue Elemente hinzufügen und vorhandene aktualisieren, ohne Code zu duplizieren.

Die zweite Sache, wird bei nachfolgenden Aufrufen mit aktualisierten Daten wichtig. Da die Elemente, an die Sie Daten binden, nicht die Daten sind, die tatsächlich gezeichnet werden, müssen die neuen Daten an sie weitergegeben werden. Dies ist, was .select() tut. Das heißt, durch myGroups.select("line") tun, sind propagieren Sie die neuen Daten gebunden an die g Elemente, um ihre Kinder line Elemente. Daher ist der Code zum Festlegen der Attribute der gleiche wie für den Eingabevorgang.

Jetzt können Sie einfach Übergänge hinzufügen, wo es erwünscht ist, bevor die neuen Attribute zu setzen.