Real Case
D3js
D3.js adalah library JavaScript yang dipakai untuk memanipulasi dokumen HTML dan menggambar diagram berdasarkan data yang diberikan. Library ini menggunakan HTML, CSS, dan SVG Untuk membuat representasi visual dari kumpulan data yang bisa dilihat diberbagai browser modern.
Karena D3.js adalah library JavaScript, untuk memakainya kita cukup menulis baris berikut di dalam file HTML.
<script src='https://d3js.org/d3.v4.min.js'></script>DOM Selection
Dengan D3.js kita bisa memanipulasi Document Object Model (DOM), yang artinya kita bsa memilih elemen dan memberikan berbagai jenis transformasi ke elemen tersebut.Mari mulai dengan contoh sederhana dimana kita akan memakai D3 untuk memilih dan mengubah warna dan ukuran font tag heading.
<html>
<head>
<title>Learn D3 in 5 minutes</title>
</head>
<body>
<h3>Today is a beautiful day!!</h3>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script>
d3.select('h3').style('color', 'darkblue');
d3.select('h3').style('font-size', '24px');
</script>
</body>
</html>
Disini kita hanya menautkan mehod select() di objek d3 yang memilih elemen tertentu, dan diikuti dengan method style(). Di method style(), parameter pertama menentukan apa yang ingin diubah dan parameter kedua memberikan nilai yang baru.
Data Binding
Konsep berikutnya yang perlu dipelajari adalah data binding karena konsep ini sangat penting di D3. Dengan menggunakannya, kita bisa mengisi atau memanipulasi elemen DOM secara realtime.
di HTML kita, tambahkan sebuah tag <ul>:
<ul> </ul>
Kita ingin mengisi unordered list tersebut dengan sebuah objek data. Berikut kode JavaScript-nya:
<script>
var fruits = ['apple', 'mango', 'banana', 'orange'];
d3.select('ul')
.selectAll('li')
.data(fruits)
.enter()
.append('li')
.text(function(d) { return d; });
</script>
Pada kode JavaScript di atas, D3 membaca elemen <ul> dan seluruh elemen <li> di dalamnya menggunakan select() dan selectAll(). Agaknya aneh kita membaca elemen li yang belum kita tamahkan disana, tapi begitulah cara kerja D3.
Kita lalu mengirimkan data dengan method data(), dan memanggil enter() yang akan mengulangi (melakukan looping atau perulangan) method-method di bawahnya (append dan text) sampai isi arrray fruits habis di baca satu persatu.
Dengan kata lain, perintah tersebut, menambahkan sebuah <li> untuk setiap item di dalam array. Untuk setiap tag li, ia juga menambahkan teks didalamnya menggunakan mehod text(). Parameter d didalam text() adalah fungsi callback yang mengarah ke elemen di dalam array saat looping terjadi (apple, mango, dst satu persatu).
Data Binding
Konsep berikutnya yang perlu dipelajari adalah data binding karena konsep ini sangat penting di D3. Dengan menggunakannya, kita bisa mengisi atau memanipulasi elemen DOM secara realtime.di HTML kita, tambahkan sebuah tag <ul>:
<ul> </ul><script>
var fruits = ['apple', 'mango', 'banana', 'orange'];
d3.select('ul')
.selectAll('li')
.data(fruits)
.enter()
.append('li')
.text(function(d) { return d; });
</script>
Pada kode JavaScript di atas, D3 membaca elemen <ul> dan seluruh elemen <li> di dalamnya menggunakan select() dan selectAll(). Agaknya aneh kita membaca elemen li yang belum kita tamahkan disana, tapi begitulah cara kerja D3.
Kita lalu mengirimkan data dengan method data(), dan memanggil enter() yang akan mengulangi (melakukan looping atau perulangan) method-method di bawahnya (append dan text) sampai isi arrray fruits habis di baca satu persatu.
Dengan kata lain, perintah tersebut, menambahkan sebuah <li> untuk setiap item di dalam array. Untuk setiap tag li, ia juga menambahkan teks didalamnya menggunakan mehod text(). Parameter d didalam text() adalah fungsi callback yang mengarah ke elemen di dalam array saat looping terjadi (apple, mango, dst satu persatu).
Refrensi :
Komentar
Posting Komentar
Silahkan Tinggalkan Saran Dan Kritik Anda