Pustaka D3 sangat bagus untuk membuat visualisasi data yang kaya dan interaktif yang berjalan di browser Anda. D3 adalah pustaka JavaScript yang menyediakan jembatan mudah antara kekuatan SVG (Scalable Vector Graphics) di browser dan aplikasi JavaScript Anda (dan saya) sendiri. Baik Anda menggunakan React, Angular, Vue, atau kerangka kerja atau program Web lainnya dalam teknologi vanilla W3C, D3 menyediakan API yang mudah digunakan untuk memanipulasi objek SVG dan menjadikannya interaktif dan beranimasi. Beberapa langkah mudah untuk memulai dengan SVG dan D3.js dijelaskan dalam artikel saya sebelumnya tentang membuat game sederhana dengan D3.

Komponen yang kuat di perpustakaan D3 adalah perpustakaan Force d3-force. Anda dapat menemukan beberapa animasi menakjubkan di internet yang dibuat dengan d3-force. Khususnya bagi pecinta fisika yang ingin memvisualisasikan interaksi antara partikel kecil atau benda besar yang diatur oleh hukum tarik-menarik dan percepatan, perpustakaan gaya d3 cukup menarik.

Butuh beberapa saat bagi saya untuk memahami apa itu d3-force dan juga apa yang bukan. Izinkan saya mencoba menjelaskan:

  • d3-force dapat menghitung posisi dan kecepatan unsur-unsur dalam suatu sistem yang diatur oleh aturan-aturan yang menyerupai hukum fisika, seperti hukum gravitasi atau gaya interaksi atau medan gaya lainnya
  • gaya d3 dapat digunakan untuk menentukan elemen dengan ukuran, massa, posisi awal, dan kecepatan, lokasi dan kecepatannya (pada saat tertentu atau setelah waktu tertentu) — misalnya untuk mencari keadaan akhir yang stabil (jika ada) .
  • d3-force tidak bekerja pada elemen SVG; d3-force bertindak berdasarkan data
  • kita dapat mengambil hasil perhitungan (disebut juga simulasi) gaya d3 dan memvisualisasikannya menggunakan elemen SVG; jika kita ingin memvisualisasikan hasil simulasi gaya d3, kita bebas melakukannya sendiri karena bukan itu yang dilakukan gaya d3. Setelah setiap iterasi simulasi (disebut “centang”) kita dapat menggunakan hasil perhitungan antara dan menggambar visualisasi dari hasil ini menggunakan SVG — atau kita tidak melakukannya (d3-force juga tidak peduli)
  • kita juga dapat membiarkan gaya d3 melalui banyak langkah simulasi dan hanya menggunakan hasil 'akhir' untuk memvisualisasikan (atau bahkan tidak memvisualisasikan) posisi akhir elemen dalam sistem yang digunakan untuk simulasi
  • d3-force dapat digunakan tanpa bagian lain dari d3 dan tanpa tingkat visualisasi apa pun.

Saya telah menggunakan d3-force untuk menemukan cara terbaik untuk mendistribusikan representasi visual (lingkaran dengan berbagai ukuran) elemen data - tanpa tumpang tindih dan dengan tolakan tertentu antara elemen dengan beberapa karakteristik, saya tidak dapat memikirkan algoritma yang baik untuk menghitung posisi lingkaran tersebut; d3-force dapat menjalankan simulasi yang menghasilkan posisi akhir yang dapat diterima untuk lingkaran ini.

Berikut adalah simulasi aksi yang divisualisasikan:

Inti dari kode yang menghasilkan perilaku ini:

Pustaka d3 dimuat ke dalam dokumen HTML statis ini. Sebuah array dengan 40 elemen dihasilkan. Setiap elemen diberi properti acak: properti yang disebut x dan y — yang nilainya diambil dari rentang acak antara 0 dan w dan h (yang mewakili lebar dan tinggi suatu area) dan r — dipetakan ke jari-jari lingkaran — dan warna. Perhatikan bahwa awalnya ini hanyalah objek data -mereka tidak memiliki hubungan dengan objek SVG, elemen HTML, atau apa pun yang ada hubungannya dengan visualisasi. Simulasi gaya D3 mengharapkan — atau membuat — properti yang disebut x dan y (dan opsional vx dan vy untuk komponen vektor kecepatan dan mungkin fx dan fy untuk menentukan nilai x dan y yang tidak boleh diubah oleh simulasi).

Fungsi doSVG() dalam hal ini membuat pemetaan elemen data tersebut ke objek SVG yang dihasilkan menggunakan d3 — sehingga kita dapat melihat representasi animasi dari simulasi dan hasil akhirnya. Dan ketika simulasi gaya d3 bekerja pada elemen data ini, ia memperbarui koordinat x dan y dan kami menggunakannya untuk menggambar ulang elemen SVG.

Perhatikan bahwa kita dapat menjalankan simulasi tanpa membuat elemen SVG apa pun. Pengendali centanghanya dapat mendaftarkan posisi x dan y akhir setelah beberapa kali iterasi dan menganggapnya sebagai satu-satunya hasil simulasi.

Namun, dalam kasus ini — blipElements adalah objek lingkaran SVG yang dibuat untuk elemen array node_data — menggunakan properti elemen ini untuk menggambar lingkaran. Dalam pengendali centang, posisi setiap lingkaran diperbarui (dengan menyesuaikan instruksi terjemahan atribut transformasi), berdasarkan nilai properti x dan y yang baru dihitung.

Simulasi ini didefinisikan dengan tiga gaya: gaya x dan y yang menarik semua elemen ke pusat area SVG dan gaya bertabrakan yang mencegah lingkaran mendekat. Jarak yang ditempuh sebuah lingkaran dari semua lingkaran lainnya ditentukan berdasarkan jari-jarinya ditambah konstanta nodePadding.

sim = d3.forceSimulation(node_data)
.force(“x”, d3.forceX(w / 2))
.force(“y”, d3.forceY(h / 2))
.force(“collide”, d3.forceCollide().radius(d => d.r + nodePadding))

Gaya x menarik semua elemen ke garis vertikal di x = 300. Gaya y menarik elemen ke garis horizontal di y = 200. Tanpa gaya tumbukan (berlawanan), semua elemen akan berpindah ke (300, 200) , semuanya tumpang tindih di tengah sistem kecil ini. Namun, gaya tumbukan mencegah tumbukan (atau: tumpang tindih) dan menjaga jarak elemen. Setiap elemen lingkaran tidak mendekat lebih dekat dari jari-jarinya ditambah konstanta bantalan simpul, yang ditetapkan pada 3, ke elemen lainnya. Karena logika yang sama (didefinisikan dalam fungsi yang diteruskan ke d3.forceCollide().radius()) diterapkan ke semua elemen, semua lingkaran memiliki zona penyangga minimal 6 di antaranya.

Segera setelah simulasi ditentukan, simulasi mulai berjalan. Itu bisa dihentikan (dengan sim.stop()). Dan pengendali dapat didaftarkan padanya — seperti pengendali centang yang ditunjukkan di sini. Setelah setiap iterasi simulasi — ketika nilai properti x dan y baru telah dihitung untuk semua elemen data, fungsi yang didaftarkan sebagai tick handler akan dipanggil. Nilai x dan y baru tersedia dan dapat digunakan untuk melakukan…..apa pun. Salah satu opsinya adalah memperbarui representasi UI elemen data — namun ingat bahwa ini sepenuhnya opsional.

Angkatan Adat

Selain pasukan siap pakai yang dikirimkan dalam d3-force, pengembang dapat menyertakan pasukan khusus dalam simulasi. Saat simulasi berjalan, fungsi gaya khusus dipanggil untuk menyesuaikan posisi dan kecepatan semua elemen dalam sistem sesuai keinginan. Efek dari kekuatan khusus digabungkan dengan efek dari kekuatan lain yang berperan.

Di sini Anda melihat efek gaya khusus yang telah ditentukan untuk mengeluarkan elemen dari area pusat yang digambarkan dengan persegi panjang merah:

Untuk memastikan: d3-force tidak mengetahui persegi panjang merah. Ini diambil semata-mata untuk kenyamanan Anda. Namun, kekuatan khusus yang ditambahkan ke simulasi mengoreksi elemen apa pun yang memasuki area tersebut.

Kita dapat mendefinisikan gaya khusus dengan logika apa pun yang kita suka — dan misalnya membuat elemen lingkaran berkumpul di sekitar berbagai bentuk yang menarik.

Sumber daya

Artikel saya sebelumnya - Pengenalan SVG dan D3 untuk pembuatan game sederhana berbasis browser https://technology.amis.nl/frontend/starting-my-own-game-studio-on-the-ease-and- kekuatan-svg/

Sumber simulasi yang dibahas dalam artikel ini: https://github.com/lucasjellema/code-cafe-intro-to-svg

Artikel tentang pengepakan melingkar D3 (pengelompokan bentuk): gaya x,y yang berbeda untuk setiap kelompok yang kita lihat — https://www.d3-graph-gallery.com/graph/circularpacking_group.html

Dokumen D3 di Force — https://github.com/d3/d3-force

Demo penggunaan d3-force untuk mensimulasikan tata surya: https://bl.ocks.org/vasturiano/54dd054d22be863da5afe2db02e033e2

Awalnya diterbitkan di https://technology.amis.nl pada 24 Mei 2021.