Mengapa Menggunakan `selectAll(null)` dalam D3.js untuk Menambah Elemen?

Memilih null: Mengapa Gunakan selectAll(null) dalam D3?

Latar Belakang

Dalam D3, adalah perkara biasa untuk melihat corak seperti:

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

Kod ini menambahkan elemen pada DOM, tetapi mengapa selectAll(null) digunakan? Bukankah sepatutnya selectAll("circle") atau selectAll("p") untuk elemen tertentu?

Pilihan Enter

Penjelasan pemilihan "enter" dalam D3.js:

Apabila mengikat data kepada elemen, terdapat tiga senario:

1. Bilangan elemen dan titik data yang sama.
2. Lebih banyak elemen daripada titik data.
3. Lebih banyak titik data daripada elemen.

Dalam senario #3, titik data tanpa elemen sepadan tergolong dalam pilihan "masuk". Menggunakan tambah dalam pemilihan "masuk" mencipta elemen baharu untuk data yang tidak sepadan.

Mengikat kepada Elemen Sedia Ada

Coretan var circles yang dicadangkan = svg.selectAll("circle").data(data ) memilih dan mengikat data kepada kalangan sedia ada. Panggilan enter() seterusnya mengendalikan titik data tanpa unsur yang sepadan.

Menggunakan selectAll(null)

Semasa menggunakan selectAll("bulatan") berfungsi apabila tiada kalangan wujud, menggunakan tawaran selectAll(null) jaminan yang konsisten bahawa pemilihan "masuk" sentiasa sepadan dengan elemen dalam tatasusunan data. Pendekatan ini memastikan elemen baharu dilampirkan untuk semua titik data yang tidak sepadan.

Kesimpulan

Contoh di bawah menunjukkan penggunaan selectAll(null) untuk menambahkan perenggan pada kandungan:

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)

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