D3.js - API Seleksi

Pilihan adalah transformasi berbasis data yang kuat dari model objek dokumen (DOM). Ini digunakan untuk mengatur Atribut, Gaya, Properti, HTML atau Konten Teks dan banyak lagi. Bab ini menjelaskan API pilihan secara detail.

Mengonfigurasi API

Anda dapat mengkonfigurasi API secara langsung menggunakan skrip di bawah ini.

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

Metode API Seleksi

Berikut ini adalah metode terpenting dalam API pemilihan.

d3.selection()
d3.select(selector)
d3.selectAll(selector)
selection.selectAll(selector)
selection.filter(filter)
selection.merge(other)
d3.matcher(selector)
d3.creator(name)
selection.each(function)
selection.call (fungsi [, argumen…])
d3.local()
local.set (node, nilai)
local.get(node)
local.remove(node)

Sekarang mari kita bahas masing-masing secara mendetail.

d3.selection ()

Metode ini digunakan untuk memilih elemen root. Fungsi ini juga dapat digunakan untuk menguji pilihan atau untuk memperluas pilihan d3js.

d3.select (selector)

Metode ini digunakan untuk memilih elemen pertama yang cocok dengan string pemilih yang ditentukan.

Example - Mari kita perhatikan contoh berikut.

var body = d3.select("body");

Jika pemilih bukan sebuah string, maka ia memilih node yang ditentukan, yang ditentukan di bawah.

d3.select("p").style("color", "red");

d3.selectAll (selector)

Metode ini memilih semua elemen yang cocok dengan string pemilih yang ditentukan.

Example - Mari kita perhatikan contoh berikut.

var body = d3.selectAll("body");

Jika pemilih bukan sebuah string, maka itu memilih larik node yang ditentukan, yang ditentukan di bawah.

d3.selectAll("body").style("color", "red");

selection.selectAll (selector)

Metode ini digunakan untuk memilih elemen. Ini memilih elemen turunan yang cocok dengan string pemilih yang ditentukan. Elemen dalam pilihan yang dikembalikan dikelompokkan menurut simpul induknya yang sesuai dalam pilihan ini. Jika tidak ada elemen yang cocok dengan selektor yang ditentukan untuk elemen saat ini, atau jika selektor tersebut nihil, grup pada indeks saat ini akan kosong.

Example - Mari kita perhatikan contoh berikut.

var b = d3.selectAll("p").selectAll("b");

selection.filter (filter)

Metode ini digunakan untuk memfilter pilihan, mengembalikan pilihan baru yang hanya berisi elemen yang benar untuk filter yang ditentukan.

Example - Mari kita perhatikan contoh berikut.

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Di sini, filter pilihan baris tabel hanya mengembalikan ganjil.

selection.merge (lainnya)

Metode ini digunakan untuk mengembalikan pilihan baru yang digabungkan dengan pilihan lain yang ditentukan.

Example - Mari kita perhatikan contoh berikut.

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (selektor)

Metode ini digunakan untuk menetapkan pemilih yang ditentukan. Ini mengembalikan fungsi, yang mengembalikan nilai true.

Example - Mari kita perhatikan contoh berikut.

var p = selection.filter(d3.matcher("p"));

d3.creator (nama)

Metode ini digunakan untuk menetapkan nama elemen yang ditentukan Ini mengembalikan fungsi, yang membuat elemen dari nama yang diberikan, dengan asumsi bahwa ini adalah elemen induk.

Example - Mari kita perhatikan contoh berikut.

selection.append(d3.creator("p"));

selection.each (fungsi)

Metode ini digunakan untuk menjalankan fungsi yang ditentukan untuk setiap elemen yang dipilih, dalam urutan yang diteruskan oleh datum saat ini (d), indeks saat ini (i) dan grup saat ini (node) dengan ini sebagai elemen DOM saat ini (node [i ]). Dijelaskan di bawah.

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (fungsi [, argumen…])

Ini digunakan untuk memanggil fungsi yang ditentukan tepat sekali. Sintaksnya ditampilkan di bawah ini.

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Metode ini dapat ditentukan seperti yang ditunjukkan di bawah ini.

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 lokal memungkinkan Anda menentukan status lokal yang tidak bergantung pada data.

Example - Mari kita perhatikan contoh berikut.

var data = d3.local();

Tidak seperti var, nilai setiap lokal juga dibatasi oleh DOM.

local.set (node, nilai)

Metode ini menetapkan nilai lokal ini pada node yang ditentukan ke nilai.

Example - Mari kita perhatikan contoh berikut.

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Metode ini mengembalikan nilai lokal ini pada node yang ditentukan. Jika node tidak mendefinisikan lokal ini, maka node mengembalikan nilai dari leluhur terdekat yang mendefinisikannya.

local.remove (node)

Metode ini menghapus nilai lokal ini dari node yang ditentukan. Ini mengembalikan true, jika node ditentukan, jika tidak mengembalikan false.