D3.js - Zooming API

Zooming membantu mengukur konten Anda. Anda dapat fokus pada kawasan tertentu menggunakan pendekatan klik-dan-seret. Pada bab ini, kita akan membahas Zooming API secara detail.

Konfigurasi API

Anda dapat memuat Zooming API langsung dari "d3js.org" 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 src = "https://d3js.org/d3-drag.v1.min.js"></script>
<script src = "https://d3js.org/d3-zoom.v1.min.js"></script>

<body>
   <script>
   </script>
</body>

Metode Zooming API

Berikut adalah beberapa Metode API Zooming yang paling umum digunakan.

d3.zoom()
zoom(selection)
zoom.transform (seleksi, transformasi)
zoom.translateBy (seleksi, x, y)
zoom.translateTo (pilihan, x, y)
zoom.scaleTo (pilihan, k)
zoom.scaleBy (seleksi, k)
zoom.filter([filter])
zoom.wheelDelta([delta])
zoom.extent([extent])
zoom.scaleExtent([extent])
zoom.translateExtent([extent])
zoom.clickDistance([distance])
zoom.duration([duration])
zoom.interpolate([interpolate])
zoom.on (nama ketik [, pendengar])

Mari kita bahas semua metode Zooming API ini secara singkat.

d3.zoom ()

Ini menciptakan perilaku zoom baru. Kita bisa mengaksesnya menggunakan script di bawah ini.

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

zoom (pilihan)

Ini digunakan untuk menerapkan transformasi zoom pada elemen yang dipilih. Misalnya, Anda dapat membuat contoh perilaku mousedown.zoom menggunakan sintaks berikut.

selection.call(d3.zoom().on("mousedown.zoom", mousedowned));

zoom.transform (seleksi, transformasi)

Ini digunakan untuk mengatur transformasi zoom saat ini dari elemen yang dipilih ke transformasi yang ditentukan. Misalnya, kita dapat mengatur ulang transformasi zoom ke transformasi identitas menggunakan sintaks di bawah ini.

selection.call(zoom.transform, d3.zoomIdentity);

Kita juga dapat mengatur ulang transformasi zoom ke transformasi identitas selama 1000 milidetik menggunakan sintaks berikut.

selection.transition().duration(1000).call(zoom.transform, d3.zoomIdentity);

zoom.translateBy (seleksi, x, y)

Ini digunakan untuk menerjemahkan transformasi zoom saat ini dari elemen yang dipilih dengan nilai x dan y. Anda dapat menentukan nilai terjemahan x dan y baik sebagai angka atau sebagai fungsi yang mengembalikan angka. Jika suatu fungsi dipanggil untuk elemen yang dipilih, maka itu akan melewati datum 'd' dan indeks 'i' untuk DOM. Kode contoh ditentukan di bawah ini.

zoom.translateBy(selection, x, y) {
   zoom.transform(selection, function() {
      return constrain(this.__zoom.translate(
         x = = = "function" ? x.apply(this, arguments) : x,
         y = = = "function" ? y.apply(this, arguments) : y
      );
   }
};

zoom.translateTo (pilihan, x, y)

Ini digunakan untuk menerjemahkan transformasi zoom saat ini dari elemen yang dipilih ke posisi x dan y yang ditentukan.

zoom.scaleTo (pilihan, k)

Ini digunakan untuk menskalakan transformasi zoom saat ini dari elemen yang dipilih k. Sini,k adalah faktor skala, ditentukan sebagai angka atau fungsi.

zoom.scaleTo = function(selection, k) {
   zoom.transform(selection, function() {
      k = = = "function" ? k.apply(this, arguments) : k;
   });
};

zoom.scaleBy (seleksi, k)

Ini digunakan untuk menskalakan transformasi zona saat ini dari elemen yang dipilih dengan k. Sini,k adalah faktor skala, ditentukan baik sebagai angka atau sebagai fungsi yang mengembalikan angka.

zoom.scaleBy = function(selection, k) {
   zoom.scaleTo(selection, function() {
      var k0 = this.__zoom.k,
      k1 = k = = = "function" ? k.apply(this, arguments) : k;
      return k0 * k1;
   });
};

zoom.filter ([filter])

Ini digunakan untuk mengatur filter ke fungsi yang ditentukan untuk perilaku zoom. Jika filter tidak ditentukan, ini mengembalikan filter saat ini seperti yang ditunjukkan di bawah ini.

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

zoom.wheelDelta ([delta])

Nilai dari Δdikembalikan oleh fungsi delta roda. Jika delta tidak ditentukan, ia mengembalikan fungsi delta roda saat ini.

zoom.extent ([luas])

Ini digunakan untuk mengatur sejauh mana titik larik yang ditentukan. Jika luas tidak ditentukan, ia mengembalikan pengakses luas saat ini, yang defaultnya ke [[0, 0], [width, height]], di mana lebar adalah lebar klien dari elemen dan tinggi adalah tinggi kliennya.

zoom.scaleExtent ([luas])

Ini digunakan untuk mengatur tingkat skala ke larik angka tertentu [k0, k1]. Sini,k0adalah faktor skala minimum yang diizinkan. Sementara,k1adalah faktor skala maksimum yang diizinkan. Jika luas tidak ditentukan, ia mengembalikan luas skala saat ini, yang defaultnya [0, ∞]. Pertimbangkan kode contoh yang ditentukan di bawah ini.

selection
   .call(zoom)
   .on("wheel", function() { d3.event.preventDefault(); });

Pengguna dapat mencoba memperbesar dengan mendorong, ketika sudah pada batas skala skala yang sesuai. Jika kita ingin mencegah pengguliran pada masukan roda terlepas dari tingkat skalanya, daftarkan pemroses kejadian roda untuk mencegah perilaku default browser.

zoom.translateExtent ([luas])

Jika luasnya ditentukan, itu menetapkan tingkat terjemahan ke larik titik yang ditentukan. Jika luas tidak ditentukan, ia mengembalikan tingkat terjemahan saat ini, yang defaultnya adalah [[-∞, -∞], [+ ∞, + ∞]].

zoom.clickDistance ([jarak])

Metode ini digunakan untuk menyetel jarak maksimum di mana area yang dapat diperbesar dapat bergerak antara ke atas dan ke bawah, yang akan memicu peristiwa klik berikutnya.

zoom.duration ([durasi])

Metode ini digunakan untuk menyetel durasi transisi zoom pada klik dua kali dan ketuk dua kali ke jumlah milidetik yang ditentukan dan mengembalikan perilaku zoom. Jika durasi tidak ditentukan, ini mengembalikan durasi saat ini, yang secara default adalah 250 milidetik, yang ditentukan di bawah.

selection
   .call(zoom)
   .on("dblclick.zoom", null);

zoom.interpolate ([interpolate])

Metode ini digunakan untuk menginterpolasi transisi zoom ke fungsi yang ditentukan. Jika interpolasi tidak ditentukan, ini akan mengembalikan pabrik interpolasi saat ini, yang defaultnya adalah d3.interpolateZoom.

zoom.on (nama ketik [, pendengar])

Jika listener ditentukan, listener akan menyetel event listener untuk nama jenis yang ditentukan dan mengembalikan perilaku zoom. Nama jenis adalah string yang berisi satu atau lebih nama jenis yang dipisahkan oleh spasi. Setiap nama jenis adalah jenis, secara opsional diikuti oleh titik (.) Dan nama, seperti zoom.one dan zoom.second. Nama tersebut memungkinkan beberapa pendengar didaftarkan untuk tipe yang sama. Jenis ini harus dari salah satu dari berikut -

Start - setelah pembesaran dimulai (seperti di mousedown).
Zoom - setelah perubahan pada transformasi zoom (seperti pada mousemove).
End - setelah pembesaran berakhir (seperti pada mouseup).

Pada bab selanjutnya, kita akan membahas API permintaan yang berbeda di D3.js.