D3.js - Transisi
Transisi adalah proses mengubah dari satu keadaan ke keadaan lain dari suatu item. D3.js menyediakan atransition()metode untuk melakukan transisi di halaman HTML. Mari kita pelajari tentang transisi dalam bab ini.
Metode transisi ()
Metode transisi () tersedia untuk semua pemilih dan memulai proses transisi. Metode ini mendukung sebagian besar metode pemilihan seperti - attr (), style (), dll. Namun, tidak mendukung metode append () dan data (), yang perlu dipanggil sebelum metode transisi (). Juga, ini menyediakan metode khusus untuk transisi seperti durasi (), kemudahan (), dll. Transisi sederhana dapat didefinisikan sebagai berikut -
d3.select("body")
.transition()
.style("background-color", "lightblue");Transisi dapat langsung dibuat menggunakan metode d3.transition () dan kemudian digunakan bersama selektor sebagai berikut.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Contoh Minimal
Sekarang mari kita buat contoh dasar untuk memahami cara kerja transisi.
Buat file HTML baru, transition_simple.html dengan kode berikut.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<h3>Simple transitions</h3>
<script>
d3.select("body").transition().style("background-color", "lightblue");
</script>
</body>
</html>Di sini, kami telah memilih bodyelemen dan kemudian memulai transisi dengan memanggil metode transisi (). Kemudian, kami telah menginstruksikan untuk transit warna latar belakang dari warna saat ini,white untuk light blue.
Sekarang, segarkan browser dan di layar, warna latar belakang berubah dari putih menjadi biru muda. Jika kita ingin mengubah warna background dari biru muda menjadi abu-abu, kita dapat menggunakan transisi berikut -
d3.select("body").transition().style("background-color", "gray");