Was sind die Vor- und Nachteile dieser Ansätze?

Question

Was sind die Vor- und Nachteile dieser beiden Ansätze? Was steuert, auf welche Weise die Balken z. von oben nach unten oder von links nach rechts? Warum arbeitet bar.exit(). Remove() nicht mit Option 2?

Option 1 https://jsfiddle.net/2523onr3/ Option 2 https://jsfiddle.net/sjp700/2523onr3/3/

bar.exit().remove() 

svg.selectAll(".bar").remove(); 

Answer 1

Sie haben hier zwei grundsätzlich verschiedene Ansätze.

Die erste Option:

bar.exit().remove() 

ist eine richtige "exit" Auswahl. Das ist, was es tut:

Ihre Update-Auswahl gegeben ...

var bar = svg.selectAll(".bar") 
    .data(dataset, function(d) { 
     return d.label; 
    }); 

... Ihre Exit-Auswahl der Daten mit den ausgewählten DOM-Elementen vergleicht. Wenn Sie mehr Elemente als Daten haben, füllen die zusätzlichen Elemente (dh die Elemente ohne Daten) diese Auswahl. Dann, wenn Sie remove() tun, entfernen Sie die Elemente, die in dieser Auswahl vorhanden sind.

Bevor remove() tun, können Sie einen beliebigen Übergang Sie mit Ihrem Ausgang Auswahl wollen tun: Auf dem Weg nach rechts, links, oben, Farbwechsel, Opazität zu ändern usw. So Sie Kontrolle „die Art und Weise die Balken fliegen“, nicht nur in der Exit-Auswahl, aber auch in der Eingabe- und Aktualisierungsauswahl.

Auf der anderen Seite, Ihre zweite Option ...

svg.selectAll(".bar").remove(); 

... wählt einfach alles mit einer Klasse mit dem Namen bar (es kann ein Kreis, ein Text, ein Rechteck, ein Fünfeck, es sein ist egal ...) und entferne alle Elemente mit dieser Klasse.