D3.js - API Transisi

Transisi D3 mengambil pemilihan elemen dan untuk setiap elemen; itu menerapkan transisi ke bagian dari definisi elemen saat ini.

Konfigurasi API

Anda dapat mengonfigurasi API transisi menggunakan skrip berikut.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

Metode API Transisi

Mari kita bahas metode Transition API secara detail.

Memilih Elemen

Mari kita bahas berbagai elemen pemilihan secara rinci.

selection.transition([name])- Metode ini digunakan untuk mengembalikan transisi pemilihan baru dengan nama. Jika sebuah nama tidak ditentukan, itu mengembalikan null.
selection.interrupt([name]) - Metode ini digunakan untuk menghentikan elemen transisi yang dipilih dengan nama dan ditentukan di bawah.

selection.interrupt().selectAll("*").interrupt();

d3.interrupt(node[, name]) - Metode ini digunakan untuk menghentikan transisi nama yang ditentukan pada simpul yang ditentukan.
d3.transition([name]) - Metode ini digunakan untuk mengembalikan transisi baru dengan nama yang ditentukan.
transition.select(selector) - Metode ini digunakan untuk memilih elemen pertama yang cocok dengan selektor yang ditentukan dan mengembalikan transisi pada pilihan yang dihasilkan, yang ditentukan di bawah.

transition
   .selection()
   .select(selector)
   .transition(transition)

transition.selectAll(selector)- Metode ini digunakan untuk memilih semua elemen yang cocok dengan selektor yang ditentukan dan mengembalikan transisi pada pilihan yang dihasilkan. Ini didefinisikan di bawah -

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

transition.filter(filter) - Metode ini digunakan untuk memilih elemen yang cocok dengan filter yang ditentukan, mereka didefinisikan di bawah.

transition
   .selection()
   .filter(filter)
   .transition(transition)

transition.merge(other)- Metode ini digunakan untuk menggabungkan transisi dengan transisi lainnya. Ini didefinisikan di bawah.

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

transition.transition()- Metode ini digunakan untuk mengembalikan transisi baru pada elemen yang dipilih. Dijadwalkan untuk dimulai saat transisi berhenti. Transisi baru mewarisi nama, durasi, dan easing transisi ini.

Example - Mari kita perhatikan contoh berikut.

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

Di sini, bodi memudar menjadi kuning dan mulai hanya lima detik sebelum transisi terakhir.

d3.active(node[, name]) - Metode ini digunakan untuk mengembalikan transisi pada node yang ditentukan dengan nama.

Metode Pengaturan Waktu

Mari kita bahas metode API waktu transisi secara detail.

transition.delay([value])- Metode ini digunakan untuk mengatur penundaan transisi ke nilai yang ditentukan. Jika sebuah fungsi dievaluasi untuk setiap elemen yang dipilih, itu akan diteruskan ke datum 'd' dan indeks 'i' saat ini, dengan konteks sebagai elemen DOM saat ini. Jika nilai tidak ditentukan, mengembalikan nilai penundaan saat ini untuk elemen pertama (bukan nol) dalam transisi. Itu didefinisikan di bawah,

transition.delay(function(d, i) { return i * 10; });

transition.duration([value])- Metode ini digunakan untuk mengatur durasi transisi ke nilai yang ditentukan. Jika nilai tidak ditentukan, mengembalikan nilai saat ini dari durasi untuk elemen pertama (bukan nol) dalam transisi.
transition.ease([value])- Metode ini digunakan untuk memudahkan nilai transisi untuk elemen yang dipilih. Fungsi easing dipanggil untuk setiap frame animasi dan melewati waktu 't' yang dinormalisasi dalam kisaran [0, 1]. Jika nilai tidak ditentukan, ini mengembalikan fungsi easing saat ini untuk elemen pertama (bukan null) dalam transisi.

Pada bab selanjutnya, kita akan membahas konsep drag and drop di d3.js.