D3JS
D3.js adalah pustaka JavaScript untuk memanipulasi dokumen berdasarkan data. D3 membantu Anda menghidupkan data menggunakan HTML, SVG, dan CSS. Penekanan D3 pada standar web memberi Anda kemampuan penuh peramban modern tanpa mengikat diri Anda pada kerangka kerja yang dipatenkan, menggabungkan komponen visualisasi yang kuat dan pendekatan berbasis data untuk manipulasi DOM.
Unduh versi terbaru (5.14.2) di sini:
Untuk menautkan langsung ke rilis terbaru, salin cuplikan ini:
<script src="https://d3js.org/d3.v5.min.js"></script>#Pendahuluan
D3 memungkinkan Anda untuk mengikat data sewenang-wenang ke Document Object Model (DOM), dan kemudian menerapkan transformasi berbasis data ke dokumen. Misalnya, Anda bisa menggunakan D3 untuk menghasilkan tabel HTML dari array angka. Atau, gunakan data yang sama untuk membuat bagan batang SVG interaktif dengan transisi dan interaksi yang lancar.
D3 bukan kerangka kerja monolitik yang berupaya menyediakan setiap fitur yang mungkin. Sebaliknya, D3 memecahkan inti masalahnya: manipulasi dokumen secara efisien berdasarkan data. Ini menghindari representasi hak milik dan memberi fleksibilitas luar biasa, memperlihatkan kemampuan penuh standar web seperti HTML, SVG, dan CSS. Dengan overhead minimal, D3 sangat cepat, mendukung kumpulan data besar dan perilaku dinamis untuk interaksi dan animasi. Gaya fungsional D3 memungkinkan penggunaan kembali kode melalui beragam koleksi modul resmi dan yang dikembangkan masyarakat .
#Pilihan
Memodifikasi dokumen menggunakan W3C DOM API sangat membosankan: nama metode sangat jelas, dan pendekatan imperatif memerlukan pengulangan manual dan pembukuan untuk kondisi sementara. Misalnya, untuk mengubah warna teks elemen paragraf:
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.style.setProperty("color", "blue", null);
}
D3 menggunakan pendekatan deklaratif, beroperasi pada set node sembarang yang disebut seleksi . Misalnya, Anda dapat menulis ulang loop di atas sebagai:
d3.selectAll("p").style("color", "blue");
Namun, Anda masih dapat memanipulasi setiap node sesuai kebutuhan:
d3.select("body").style("background-color", "black");
Selectors didefinisikan oleh W3C Selectors API dan didukung secara native oleh browser modern. Contoh di atas memilih node berdasarkan nama tag (
"p"dan "body", masing-masing). Elemen dapat dipilih menggunakan berbagai predikat, termasuk penahanan, nilai atribut, kelas dan ID.
D3 menyediakan banyak metode untuk bermutasi node: mengatur atribut atau gaya; mendaftarkan pendengar acara; menambah, menghapus atau menyortir node; dan mengubah konten HTML atau teks. Ini cukup untuk sebagian besar kebutuhan. Akses langsung ke DOM yang mendasarinya juga dimungkinkan, karena setiap pemilihan D3 hanyalah sebuah array node.
#Properti Dinamis
Pembaca yang akrab dengan kerangka kerja DOM lainnya seperti jQuery harus segera mengenali kesamaan dengan D3. Namun gaya, atribut, dan properti lainnya dapat ditentukan sebagai fungsi data dalam D3, bukan hanya konstanta sederhana. Meskipun kesederhanaannya jelas, fungsi-fungsi ini bisa sangat kuat; yang d3.geoPath fungsi, misalnya, proyek koordinat geografis ke SVG jalur data . D3 menyediakan banyak fungsi dan fungsi pabrik yang dapat digunakan kembali, seperti primitif grafis untuk area, garis, dan diagram lingkaran.
Misalnya, untuk mewarnai paragraf secara acak:
d3.selectAll("p").style("color", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
Untuk mengganti nuansa abu-abu untuk simpul genap dan genap:
d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});
Properti yang dihitung sering merujuk ke data yang terikat. Data ditentukan sebagai larik nilai, dan setiap nilai dilewatkan sebagai argumen pertama (
d) ke fungsi pemilihan. Dengan join-by-index default, elemen pertama dalam array data dilewatkan ke node pertama dalam seleksi, elemen kedua ke node kedua, dan seterusnya. Misalnya, jika Anda mengikat array angka ke elemen paragraf, Anda dapat menggunakan angka-angka ini untuk menghitung ukuran font dinamis:d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
Setelah data terikat pada dokumen, Anda dapat menghilangkan
dataoperator; D3 akan mengambil data yang sebelumnya terikat. Ini memungkinkan Anda menghitung ulang properti tanpa harus memutarnya.#Masuk dan Keluar
Menggunakan pilihan masuk dan keluar D3 , Anda dapat membuat node baru untuk data yang masuk dan menghapus node keluar yang tidak lagi diperlukan.
Ketika data terikat ke suatu pilihan, setiap elemen dalam array data dipasangkan dengan simpul yang sesuai dalam seleksi. Jika jumlah node lebih sedikit daripada data, elemen data tambahan membentuk seleksi enter, yang dapat Anda instantiate dengan menambahkan
enterseleksi. Sebagai contoh:d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.enter().append("p")
.text(function(d) { return "I’m number " + d + "!"; });
Memperbarui node adalah pilihan default — hasil dari
dataoperator. Jadi, jika Anda lupa tentang pilihan masuk dan keluar, Anda akan secara otomatis memilih hanya elemen yang ada datanya. Pola umum adalah memecah seleksi awal menjadi tiga bagian: node pembaruan untuk memodifikasi, node masuk untuk ditambahkan, dan node yang akan dihapus.// Update…
var p = d3.select("body")
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });
// Enter…
p.enter().append("p")
.text(function(d) { return d; });
// Exit…
p.exit().remove();
Dengan menangani tiga case ini secara terpisah, Anda menentukan dengan tepat operasi mana yang dijalankan pada node mana. Ini meningkatkan kinerja dan menawarkan kontrol yang lebih besar atas transisi. Misalnya, dengan bagan batang Anda dapat menginisialisasi memasuki bar menggunakan skala lama, dan kemudian transisi memasukkan bar ke skala baru bersama dengan bar memperbarui dan keluar.
D3 memungkinkan Anda mengubah dokumen berdasarkan data; ini termasuk menciptakan dan menghancurkan elemen. D3 memungkinkan Anda untuk mengubah dokumen yang ada sebagai respons terhadap interaksi pengguna, animasi dari waktu ke waktu, atau bahkan notifikasi tidak sinkron dari pihak ketiga. Pendekatan hibrida bahkan mungkin, di mana dokumen awalnya diberikan di server, dan diperbarui pada klien melalui D3.
#Transformasi, bukan Representasi
D3 tidak memperkenalkan representasi visual baru. Tidak seperti Processing atau Protovis , kosakata tanda grafis D3 berasal langsung dari standar web: HTML, SVG, dan CSS. Misalnya, Anda bisa membuat elemen SVG menggunakan D3 dan menatanya dengan stylesheet eksternal. Anda dapat menggunakan efek filter komposit, stroke putus-putus dan kliping. Jika vendor browser memperkenalkan fitur-fitur baru besok, Anda akan dapat segera menggunakannya — tidak ada pembaruan toolkit yang diperlukan. Dan, jika Anda memutuskan di masa depan untuk menggunakan alat selain D3, Anda dapat membawa pengetahuan Anda tentang standar!
Yang terbaik dari semuanya, D3 mudah di-debug menggunakan inspektur elemen bawaan browser: node yang Anda manipulasi dengan D3 adalah persis yang dipahami oleh browser secara asli.
#Transisi
Fokus D3 pada transformasi meluas secara alami ke transisi animasi. Transisi secara bertahap menginterpolasi gaya dan atribut dari waktu ke waktu. Tweening dapat dikontrol melalui fungsi pelonggaran seperti "elastis", "cubic-in-out" dan "linear". Interpolator D3 mendukung baik primitif, seperti angka dan angka yang tertanam dalam string (ukuran font, data jalur, dll. ), Dan nilai majemuk. Anda bahkan dapat memperluas registri interpolator D3 untuk mendukung properti kompleks dan struktur data.
Misalnya, untuk memudar latar belakang halaman menjadi hitam:
d3.select("body").transition()
.style("background-color", "black");
Atau, untuk mengubah ukuran lingkaran di peta simbol dengan penundaan:
d3.selectAll("circle").transition()
.duration(750)
.delay(function(d, i) { return i * 10; })
.attr("r", function(d) { return Math.sqrt(d * scale); });
Dengan memodifikasi hanya atribut yang benar-benar berubah, D3 mengurangi overhead dan memungkinkan kompleksitas grafis yang lebih besar pada frame rate tinggi. D3 juga memungkinkan pengurutan transisi kompleks melalui peristiwa. Dan, Anda masih dapat menggunakan transisi CSS3; D3 tidak menggantikan kotak alat browser, tetapi memaparkannya dengan cara yang lebih mudah digunakan.
0 comments:
Post a Comment