Warum „selectAll(null)“ in D3.js verwenden?

Null auswählen: Die Logik hinter selectAll(null) in D3.js

In D3.js stoßen Sie möglicherweise auf Code wie Dies zum Hinzufügen von DOM-Elementen:

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

Während es üblich ist, bestimmte Elemente wie „Kreis“, „p“ oder „.foo“ auszuwählen, kann die Auswahl von „null“ rätselhaft erscheinen. Diese Technik stellt jedoch sicher, dass die „Enter“-Auswahl immer dem Datenarray entspricht, mit einem Element für jeden Datenpunkt.

Die „Enter“-Auswahl

Eine „Enter“-Auswahl umfasst Datenelemente, die keine entsprechenden DOM-Elemente haben. D3.js ermöglicht die Bindung von Daten an vorhandene DOM-Elemente. Wenn jedoch mehr Datenpunkte als DOM-Elemente vorhanden sind, gehören die überschüssigen Datenpunkte zur „Enter“-Auswahl. Durch die Verwendung einer „Anhängen“-Funktion für diese Auswahl werden neue DOM-Elemente erstellt und die Daten an sie gebunden.

Daten an vorhandene Elemente binden

Traditionell werden Elemente für ausgewählt Die Bindung sieht folgendermaßen aus:

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

circles.enter()
.append("circle");

Dieser Ansatz erstellt eine „Aktualisieren“-Auswahl für die vorhandenen Kreiselemente, während die „Eingabe“-Auswahl Datenpunkte ohne entsprechende Elemente behandelt.

Unabhängig davon, ob Elemente vorhanden sind, gibt selectAll(null) jedoch eine Auswahl zurück, die das gesamte Datenarray darstellt. Dadurch wird sichergestellt, dass die „Enter“-Auswahl immer den vollständigen Datensatz enthält, unabhängig vom Status des DOM.

Beispiel

Um dieses Konzept zu veranschaulichen: Betrachten Sie das folgende Beispiel:

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

Auch wenn es keine

Elemente zunächst stellt selectAll(null) sicher, dass die „Enter“-Auswahl alle Datenpunkte enthält, und Absätze werden entsprechend für sie erstellt.

Zusammenfassend stellt selectAll(null) einen konsistenten Mechanismus zur Sicherstellung der „Enter“-Auswahl bereit „ Die Auswahl richtet sich immer nach dem Datenarray, sodass die Datenbindung unabhängig vom DOM-Status einfach ist.

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