Penjelasan terperinci mengenai lukisan tulang ikan kompleks di JavaScript asli

Artikel ini menerangkan cara menggunakan kod JavaScript tulen untuk menarik rajah tulang ikan yang kompleks dan disesuaikan tanpa perlu menggunakan perpustakaan pihak ketiga seperti G6. Kami akan menyelam ke dalam pelaksanaan kod secara mendalam dan menunjukkan bahagian -bahagian kod yang perlu diperbaiki.

Artikel ini didasarkan pada contoh yang disediakan pengguna gambarajah tulang ikan yang kompleks (lihat angka di atas). Rajah ini mengandungi nod kanak-kanak pelbagai peringkat dan maklumat teks nod. Oleh itu, kaedah lukisan SVG asli dipilih untuk membuat elemen SVG secara langsung dalam HTML untuk membina gambarajah tulang ikan untuk fleksibiliti yang lebih tinggi.

Kod ini mula -mula mentakrifkan struktur data JSON arr menyimpan nod dan hubungan hubungan graf tulang ikan. Setiap nod mengandungi sifat seperti label (label), value (nilai), type , time (masa), dan child (nod kanak -kanak). Bahagian teras adalah kelas FishBone , yang bertanggungjawab untuk menguraikan data dan melukis menggunakan elemen SVG.

Kelas FishBone mengandungi kaedah utama berikut:

• initKvArray() : Melalui data, mengira lebar nod untuk setiap bulan, dan menyimpannya di kvArray . Lebar diselaraskan secara adaptif mengikut panjang teks terpanjang dalam nod kanak -kanak.
• getMaxWidth() : Recursif mengira lebar teks terpanjang dalam setiap nod dan nod anaknya, dan menentukan lebar nod.
• randerMonthBox() : menarik nod bulan (parallelogram) dan teksnya. Koordinat X nod bulan dikira berdasarkan lebar nod sebelumnya.
• creatBigCircle() : Lukis nod utama (bulatan) dan garis penyambung, dan renderParent() untuk menarik nod kanak -kanak.
• renderParent() : Rekursif menarik nod kanak -kanak dan mengira ketinggian nod kanak -kanak.
• randerLeaf() : Lukis nod daun terendah.
• getMaxChildHeight() : Recursif mengira bilangan maksimum nod kanak -kanak setiap nod dan menentukan susunan nod kanak -kanak.
• getLineWidth() : Kirakan lebar teks, tetapkan lebar minimum, dan pastikan garis cukup lama untuk menampung teks.
• createTag() : fungsi penolong, buat elemen SVG.
• createMonth() : Fungsi penolong, buat nod bulan.

Kod ini telah melaksanakan sebahagian besar fungsi, termasuk penyesuaian lebar nod bulan, penyesuaian panjang teks, dan lukisan graf asas. Tetapi masih ada bahagian berikut yang akan diperbaiki:

• Subset Expansion/Shrink Fungsi: Membolehkan pengguna mengembangkan atau mengecilkan nod kanak -kanak untuk meningkatkan interaktiviti.
• Konfigurasi Warna Line: Membolehkan pengguna menyesuaikan warna garis untuk meningkatkan kesan visual.
• Keseluruhan Penguncupan/Expand Function: Membolehkan pengguna mengembangkan atau mengecilkan keseluruhan gambarajah tulang ikan pada satu masa.
• Fungsi saiz penyesuaian gambar: Secara automatik menyesuaikan saiz gambarajah tulang ikan mengikut kandungan untuk menyesuaikan diri dengan saiz skrin yang berbeza.
• Node Event Binding: Membolehkan pengguna berinteraksi dengan nod, seperti mengklik pada nod untuk memaparkan lebih banyak maklumat.

Fungsi -fungsi ini perlu ditambah dan diperbaiki mengikut keperluan sebenar. Kod ini telah menyimpan antara muka dan pembolehubah yang relevan untuk pengembangan mudah. Sebagai contoh, anda boleh menambah atribut acara dalam data arr dan mengikat pendengar acara untuk melaksanakan peristiwa nod semasa membuat elemen.

Kod ini menyediakan asas Diagram Fishbone Lengkap, yang pengguna boleh menyesuaikan dan mengembangkan mengikut keperluan mereka sendiri. Ciri -ciri SVG asli memastikan fleksibiliti dan kawalan.

Atas ialah kandungan terperinci Bagaimana untuk menarik rajah tulang ikan yang kompleks dan disesuaikan menggunakan JavaScript asli?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!