Mengapa Gunakan `selectAll(null)` dalam D3.js?

Memilih nol: Logik Di Sebalik selectAll(null) dalam D3.js

Dalam D3.js, anda mungkin menemui kod seperti ini untuk menambah elemen DOM:

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

Walaupun biasa untuk memilih elemen tertentu, seperti "bulatan," "p," atau ".foo," memilih "null" mungkin kelihatan membingungkan. Walau bagaimanapun, teknik ini memastikan bahawa pemilihan "masuk" sentiasa sepadan dengan tatasusunan data, dengan satu elemen untuk setiap titik data.

Pilihan "Enter"

Pilihan "masuk" terdiri daripada elemen data yang tidak mempunyai elemen DOM yang sepadan. D3.js membenarkan data mengikat kepada elemen DOM sedia ada. Walau bagaimanapun, jika terdapat lebih banyak titik data daripada elemen DOM, lebihan titik data tergolong dalam pilihan "masuk". Menggunakan fungsi "tambah" pada pemilihan ini mencipta elemen DOM baharu, mengikat data padanya.

Mengikat Data kepada Elemen Sedia Ada

Secara tradisinya, memilih elemen untuk pengikatan kelihatan seperti ini:

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

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

Pendekatan ini mencipta pilihan "kemas kini" untuk elemen bulatan sedia ada, manakala pemilihan "masuk" mengendalikan titik data tanpa elemen yang sepadan.

Walau bagaimanapun, tidak kira sama ada terdapat elemen sedia ada, selectAll(null) mengembalikan pilihan yang mewakili keseluruhan tatasusunan data. Ini memastikan bahawa pilihan "masuk" akan sentiasa mengandungi set data yang lengkap, tanpa mengira keadaan DOM.

Contoh

Untuk menggambarkan konsep ini, pertimbangkan contoh berikut:

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);

Walaupun tiada

elemen pada mulanya, selectAll(null) memastikan bahawa pemilihan "enter" mengandungi semua titik data dan perenggan dibuat untuknya dengan sewajarnya.

Ringkasnya, selectAll(null) menyediakan mekanisme yang konsisten untuk memastikan "enter" " pemilihan sentiasa sejajar dengan tatasusunan data, menjadikan data mengikat secara mudah tanpa mengira keadaan DOM.

Atas ialah kandungan terperinci Mengapa Gunakan `selectAll(null)` dalam D3.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!