DC.js - Pengantar D3.js
D3.js adalah pustaka JavaScript yang digunakan untuk membuat visualisasi interaktif di browser. Pustaka D3 memungkinkan kita memanipulasi elemen halaman web dalam konteks kumpulan data. Elemen ini dapat berupa elemen HTML, SVG, atau Kanvas, dan dapat dimasukkan, dihapus, atau diedit sesuai dengan konten kumpulan data. Ini adalah perpustakaan untuk memanipulasi objek DOM. D3.js dapat menjadi bantuan yang berharga dalam eksplorasi data. Ini memberi Anda kendali atas representasi data Anda dan memungkinkan Anda menambahkan interaktivitas data.
D3.js adalah salah satu kerangka kerja utama jika dibandingkan dengan pustaka lain. Hal ini karena; ini berfungsi di web dan visualisasi data serta berkelas perusahaan. Alasan lainnya adalah fleksibilitasnya yang luar biasa, yang memungkinkan pengembang di seluruh dunia membuat banyak bagan lanjutan. Juga, itu telah memperluas fungsinya untuk sebagian besar.
Mari kita pahami konsep dasar D3.js, yaitu sebagai berikut -
- Selections
- Data bergabung
- SVG
- Transition
- Animation
- API D3.js
Mari kita pahami masing-masing konsep ini secara rinci.
Seleksi
Pemilihan adalah salah satu konsep inti di D3.js. Ini didasarkan pada konsep Pemilih CSS. Mereka yang telah menggunakan dan mengetahui JQuery sudah dapat dengan mudah memahami pilihannya. Ini memungkinkan kita untuk memilih DOM berdasarkan pemilih CSS dan kemudian memberikan opsi untuk memodifikasi atau menambahkan dan menghapus elemen DOM.
Gabung Data
Penggabungan data adalah konsep penting lainnya di D3.js. Ia bekerja bersama dengan pilihan dan memungkinkan kita untuk memanipulasi dokumen HTML sehubungan dengan dataset 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.
SVG
SVG adalah singkatan dari Scalable Vector Graphics. SVG adalah format grafik vektor berbasis XML. Ini memberikan opsi untuk menggambar berbagai bentuk seperti Garis, Persegi Panjang, Lingkaran, Elips, dll. Karenanya, merancang visualisasi dengan SVG memberi Anda lebih banyak kekuatan dan fleksibilitas.
Transformasi
SVG memberikan opsi untuk mengubah satu elemen bentuk SVG atau sekelompok elemen SVG. Transformasi SVG mendukung Terjemahan, Skala, Putar dan Kemiringan.
Transisi
Transisi adalah proses mengubah dari satu keadaan ke keadaan lain dari suatu item. D3.js menyediakan metode transisi () untuk melakukan transisi di halaman HTML.
Animasi
D3.js mendukung animasi melalui transisi. Animasi dapat dilakukan dengan penggunaan transisi yang tepat. Transisi adalah bentuk animasi bingkai kunci yang terbatas dengan hanya dua bingkai utama:start dan end. Bingkai kunci awal biasanya adalah keadaan DOM saat ini, dan bingkai kunci akhir adalah sekumpulan atribut, gaya, dan properti lain yang Anda tentukan. Transisi sangat sesuai untuk transisi ke tampilan baru tanpa kode rumit yang bergantung pada tampilan awal.
API D3.js
Mari kita pahami beberapa metode API D3.js yang penting secara singkat.
Collections API
Koleksi hanyalah sebuah objek yang mengelompokkan beberapa elemen ke dalam satu unit. Ini juga disebut sebagai wadah. Ini berisi Objek, Peta, Set dan Sarang.
Paths API
Paths digunakan untuk menggambar persegi panjang, lingkaran, elips, polylines, polygon, garis lurus dan kurva. SVG Paths merepresentasikan garis bentuk yang dapat dielus, diisi, digunakan sebagai jalur pemotongan, atau kombinasi ketiganya.
API Axis
D3.js menyediakan fungsi untuk menggambar sumbu. Sumbu terbuat dari garis, tanda centang, dan label. Sumbu menggunakan skala, sehingga setiap sumbu perlu diberi skala untuk dikerjakan.
Zooming API
Zooming membantu mengukur konten Anda. Anda dapat fokus pada kawasan tertentu menggunakan pendekatan klik-dan-seret.
API Nilai yang Dipisahkan Pembatas
Pembatas adalah urutan satu atau beberapa karakter yang digunakan untuk menentukan batas antara kawasan terpisah dan independen dalam teks biasa atau data lainnya. Pembatas bidang adalah urutan nilai yang dipisahkan koma. Singkatnya, nilai yang dipisahkan pembatas adalah Comma-Separated Values (CSV) atau Tab-Separated Values (TSV).