Kann die Eingabe() Auswahl nach Anhängen/Einfügen wiederverwendet werden?

Question

Ich habe ein Szenario, in dem ich eine Datenverbindung verwenden möchte, um zwei neue Elemente für jedes Datenelement anzuhängen.

Ich war ursprünglich so etwas wie dies zu tun:

var y = d3.selectAll("line") 
    .data([123, 456]); 

y.enter().append("line"); // assume attr and style set 
y.enter().append("line"); 

y.transition()... 

Bevor ich es gedacht, ich habe erwartet, dass die Update Auswahl in meinem Übergang verwendet würde enthält die anfügt aus der Auswahl eingeben verschmolzen. Aber das hat natürlich nicht funktioniert, da pro Datenelement nur ein Slot in der Auswahl ist.

Also änderte ich den Code so, dass er immer noch die selbe enter() -Auswahl zweimal benutzte, dann aber wieder für die neuen Elemente ausgewählt wurde, um den Übergang zu machen.

Dieser Ansatz hat funktioniert, aber meine Frage ist, ob dies ein empfohlener Weg ist. Soll ich sicherstellen, dass ich nicht mehr enter() benutze, nachdem ich angehängt/eingefügt habe? Oder ist es in Ordnung, es zu verwenden, um mehrere Elemente zu erstellen, solange ich mich erinnere, dass die Update-Auswahl nur die zuletzt erstellten Elemente enthält?

Wenn es sich herausstellt, dass dies falsch ist, was ist ein besserer Weg, dies zu erreichen?

Answer 1

Nein. Der Zweck der Datenverbindung ist synchronize elements with data, Erstellen, Entfernen oder Aktualisieren von Elementen nach Bedarf. Wenn Sie Elemente zweimal erstellen, entsprechen die Elemente nicht mehr eins zu eins dem gebundenen Datenfeld.

Wenn zwei Elemente mit jedem Datum übereinstimmen sollen, dann fügen Sie zuerst ein Gruppenelement (G) an, um eine Eins-zu-Eins-Zuordnung von Daten zu Elementen herzustellen. Dann Kinderelemente bei Bedarf anhängen. Die resultierende Struktur ist wie folgt:

<g> 
    <line class="line1"></line> 
    <line class="line2"></line> 
</g> 
<g> 
    <line class="line1"></line> 
    <line class="line2"></line> 
</g> 

Zum Beispiel:

var g = svg.selectAll("g") 
    .data([123, 456]); 

var gEnter = g.enter().append("g"); 
gEnter.append("line").attr("class", "line1"); 
gEnter.append("line").attr("class", "line2");