D3.js - Menyeret API

Seret dan lepas adalah salah satu konsep yang paling dikenal di d3.js. Bab ini menjelaskan menyeret dan metodenya secara rinci.

Instalasi

Kita bisa langsung memasukkan drag API menggunakan script berikut.

<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-drag.v1.min.js"></script>

Menyeret Metode API

Berikut adalah beberapa metode menyeret API yang paling penting di D3.js.

d3.drag()
drag(selection)
drag.container([container])
drag.filter([filter])
drag.subject([subject])
drag.clickDistance([distance])
drag.on (nama jenis, [pendengar])
d3.dragDisable(window)
d3.dragEnable (window [, noclick])

Marilah kita sekarang memahami masing-masing secara mendetail.

d3.drag ()

Metode ini digunakan untuk membuat penarikan baru. Anda dapat memanggil metode ini menggunakan skrip berikut.

<script>
   var drag = d3.drag();
</script>

seret (seleksi)

Metode ini digunakan untuk menerapkan penarikan ke pilihan yang ditentukan. Anda dapat menjalankan fungsi ini menggunakanselection.call. Contoh sederhana dijelaskan di bawah ini.

d3.select(".node").call(d3.drag().on("drag", mousemove));

Di sini, perilaku seret yang diterapkan ke elemen yang dipilih adalah melalui selection.call.

drag.container([container])

Ini digunakan untuk menyetel penampung ke fungsi yang ditentukan untuk menyeret. Jika wadah tidak ditentukan, itu mengembalikan pengakses saat ini. Untuk menyeret elemen grafis apa pun dengan Kanvas, Anda dapat mendefinisikan ulang wadah sebagai wadah itu sendiri. Ini didefinisikan di bawah.

function container() {
   return this;
}

drag.filter ([filter])

Ini digunakan untuk mengatur filter untuk fungsi yang ditentukan. Jika filter tidak ditentukan, ini mengembalikan filter saat ini seperti yang didefinisikan di bawah ini.

function filter() {
   return !d3.event.button;
}

drag.subject ([subject])

Ini digunakan untuk menyetel subjek ke fungsi yang ditentukan untuk menyeret dan ditentukan di bawah.

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

Di sini, subjek mewakili benda yang sedang diseret. Misalnya, jika Anda ingin menyeret elemen persegi panjang di SVG, subjek defaultnya adalah datum persegi panjang yang sedang diseret.

drag.clickDistance ([jarak])

Metode ini digunakan untuk menyetel jarak maksimum untuk mengklik peristiwa mousedown dan mouseup. Jika jarak tidak ditentukan, itu menunjuk ke nol.

drag.on (nama jenis, [pendengar])

Metode ini digunakan untuk menyetel event listener untuk nama jenis tertentu untuk menyeret. Nama jenis adalah string yang berisi satu atau lebih nama jenis yang dipisahkan oleh spasi. Setiap nama tipe adalah tipe, secara opsional diikuti oleh titik (.) Dan nama, seperti drag.one dan drag.two. Jenis ini harus dari salah satu dari berikut -

start - memulai penunjuk baru.
drag - menyeret penunjuk aktif.
end - Penunjuk aktif tidak aktif.

d3.dragDisable (jendela)

Metode ini digunakan untuk menonaktifkan pilihan drag and drop. Ini mencegah aksi acara mousedown. Sebagian besar browser yang dipilih mendukung tindakan ini secara default. Jika tidak didukung, Anda dapat menyetel properti CSS ke none.

d3.dragEnable (window [, noclick])

Metode ini digunakan untuk mengaktifkan pilihan seret dan lepas di lokasi jendela yang ditentukan. Ini digunakan untuk memanggil aksi peristiwa mouseup. Jika Anda menetapkan nilai noclick benar maka peristiwa klik berakhir waktu tunggu milidetik nol.

Dragging API - Drag Events

Metode D3.event digunakan untuk mengatur event drag. Ini terdiri dari bidang berikut -

Target - Ini mewakili perilaku drag.
Type - Ini adalah string dan dapat berupa salah satu dari yang berikut– "mulai", "seret", atau "akhir".
Subject - Subjek tarik, ditentukan oleh drag.subject.

event.on (nama jenis, [pendengar])

Objek acara mengekspos metode event.on untuk melakukan penarikan. Ini didefinisikan sebagai berikut.

d3.event.on("drag", dragged).on("end", ended);