D3.js - Gabungan Data
Penggabungan data adalah konsep penting lainnya di D3.js. Ia bekerja bersama dengan pilihan dan memungkinkan kita untuk memanipulasi dokumen HTML sehubungan dengan kumpulan data kita (serangkaian nilai numerik). Secara default, D3.js memberikan kumpulan data prioritas tertinggi dalam metodenya dan setiap item dalam kumpulan data sesuai dengan elemen HTML. Bab ini menjelaskan data join secara rinci.
Apa itu Gabungan Data?
Penggabungan data memungkinkan kami untuk memasukkan, memodifikasi, dan menghapus elemen (elemen HTML serta elemen SVG yang disematkan) berdasarkan kumpulan data dalam dokumen HTML yang ada. Secara default, setiap item data dalam kumpulan data sesuai dengan elemen (grafis) dalam dokumen.
Saat kumpulan data berubah, elemen terkait juga dapat dimanipulasi dengan mudah. Gabungan data menciptakan hubungan yang erat antara data kami dan elemen grafis dokumen. Gabungan data membuat manipulasi elemen berdasarkan kumpulan data menjadi proses yang sangat sederhana dan mudah.
Bagaimana Data Join Bekerja?
Tujuan utama Data join adalah memetakan elemen dokumen yang ada dengan kumpulan data yang diberikan. Ini membuat representasi virtual dari dokumen sehubungan dengan kumpulan data yang diberikan dan menyediakan metode untuk bekerja dengan representasi virtual. Mari kita pertimbangkan kumpulan data sederhana seperti yang ditunjukkan di bawah ini.
[10, 20, 30, 25, 15]Kumpulan data memiliki lima item dan karenanya, dapat dipetakan ke lima elemen dokumen. Mari kita petakan keli elemen dokumen berikut menggunakan metode selector's selectAll () dan metode data join's data ().
HTML
<ul id = "list">
<li><li>
<li></li>
</ul>Kode D3.js
d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);Sekarang, ada lima elemen virtual dalam dokumen tersebut. Dua elemen virtual pertama adalah keduanyali elemen yang didefinisikan dalam dokumen seperti yang ditunjukkan di bawah ini.
1. li - 10
2. li - 20Kita dapat menggunakan semua metode modifikasi elemen pemilih seperti attr(), style(), text(), dll., untuk dua yang pertama li seperti gambar dibawah.
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return d; });Fungsi dalam metode text () digunakan untuk mendapatkan lielemen data yang dipetakan. Sini,d mewakili 10 untuk yang pertama li elemen dan 20 untuk detik li elemen.
Tiga elemen berikutnya dapat dipetakan ke elemen apa pun dan dapat dilakukan menggunakan metode enter () dan append () selector dari gabungan data. Metode enter () memberikan akses ke data yang tersisa (yang tidak dipetakan ke elemen yang ada) dan metode append () digunakan untuk membuat elemen baru dari data yang sesuai. Mari kita buatliuntuk item data yang tersisa juga. Peta datanya adalah sebagai berikut -
3. li - 30
4. li - 25
5. li - 15Kode untuk membuat elemen li baru adalah sebagai berikut -
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });Penggabungan data menyediakan metode lain yang disebut sebagai exit() method untuk memproses item data yang dihapus secara dinamis dari kumpulan data seperti yang ditunjukkan di bawah ini.
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()Di sini, kami telah menghapus item keempat dari kumpulan data dan li yang sesuai menggunakan metode exit () dan remove ().
Kode lengkapnya adalah sebagai berikut -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<ul id = "list">
<li></li>
<li></li>
</ul>
<input type = "button" name = "remove" value = "Remove fourth value"
onclick = "javascript:remove()" />
<script>
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d)
{ return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
</script>
</body>
</html>Hasil dari kode di atas adalah sebagai berikut -