Warum „selectAll(null)“ in D3.js zum Anhängen von Elementen verwenden?

Null auswählen: Warum selectAll(null) in D3 verwenden?

Hintergrund

In D3 sieht man häufig Muster wie:

var circles = svg.selectAll(null)
    .data(data)
    .enter()
    .append("circle");

Dieser Code hängt Elemente an das DOM an, aber warum wird selectAll(null) verwendet? Sollte es nicht selectAll("circle") oder selectAll("p") für bestimmte Elemente sein?

Die Enter-Auswahl

Erklärung der „Enter“-Auswahl in D3.js:

Beim Binden von Daten an Elemente gibt es drei Szenarien:

1. Gleiche Anzahl von Elementen und Datenpunkten.
2. Mehr Elemente als Datenpunkte.
3. Mehr Datenpunkte als Elemente.

In Szenario Nr. 3 gehören Datenpunkte ohne entsprechende Elemente zur „Enter“-Auswahl. Durch die Verwendung von „Anhängen“ in einer „Enter“-Auswahl werden neue Elemente für die nicht übereinstimmenden Daten erstellt.

Bindung an vorhandene Elemente

Das vorgeschlagene Snippet var circles = svg.selectAll("circle").data(data ) wählt Daten aus und bindet sie an vorhandene Kreise. Der anschließende Aufruf von enter() verarbeitet Datenpunkte ohne übereinstimmende Elemente.

Verwendung von selectAll(null)

Während die Verwendung von selectAll("circle") funktioniert, wenn keine Kreise vorhanden sind, bietet sich die Verwendung von selectAll(null) an eine konsistente Garantie dafür, dass die „Enter“-Auswahl immer den Elementen im Datenarray entspricht. Dieser Ansatz stellt sicher, dass neue Elemente für alle nicht übereinstimmenden Datenpunkte angehängt werden.

Fazit

Das folgende Beispiel zeigt die Verwendung von selectAll(null) zum Anhängen von Absätzen an den Textkörper:

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll(null)
  .data(data)
  .enter()
  .append("p")
  .text(d => "I am a " + d + " paragraph!")
  .style("color", String)

Das obige ist der detaillierte Inhalt vonWarum „selectAll(null)“ in D3.js zum Anhängen von Elementen verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!