D3 adalah pustaka JS visual berdasarkan operasi data. Untuk memahami D3, kami mulai dengan tampilan data yang dapat dimuat paling dasar.
Saya tidak akan banyak bicara tentang kerangka dasar HTML, pertama -tama saya akan meletakkan kode dan kemudian menjelaskannya:
Buat direktori tes baru dan buat dua folder demo dan D3 di bawah direktori ini. Demo Menyimpan file HTML yang akan ditulis, dan D3 menyimpan d3.v3.js
Buat indexp.html baru di bawah folder demo, salin kode berikut, dan klik dua kali untuk membuka efek di browser.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: Setting paragraphs' style conditionally, based on data</title> <script type="text/javascript" src="../d3/d3.v3.js"></script> </head> <body> <script type="text/javascript"> var dataset = [5, 10, 15, 20, 25]; d3.select ("body"). selectAll ("p") .data (dataset) .Enterer () .Append ("p") .text (function (d) {return "Saya dapat menghitung hingga" + d;}) .style ("color", function (d) {if (d> 15) {// threshold {{if {if {d> 15) {{{d> 15) </script> </body> </html>Fungsi yang diimplementasikan oleh demo sederhana ini adalah: tambahkan t tag ke tubuh, tambahkan konten teks yang dimuat oleh D3 dalam tag p, dan sesuaikan warna teks sesuai dengan kondisi pengaturan fungsi.
Kode halaman web di atas dan kode JS di badan adalah operasi data yang ditampilkan pada halaman. Untuk banyak contoh di masa depan, cukup ubah bagian ini, dan bagian lain dapat dianggap sebagai kerangka kerja halaman.
Artikel sebelumnya di sini umumnya berbicara tentang penggunaan konjungsi D3 untuk menghubungkan operasi data langkah demi langkah dari objek yang sama untuk pemeliharaan yang mudah.
d3.select ("body") Pilih elemen tubuh dan menggabungkannya ke metode berikutnya
.selectall ("p") pilih semua paragraf
.data (dataset) mem -parsing data array pemuatan. Panjang array adalah 5. Setiap metode yang digabungkan akan dieksekusi lima kali di masa depan. Lakukan operasi metode pada elemen array secara berurutan sesuai dengan subskrip array.
.Enter () membuat elemen placeholder untuk data terikat baru (setara dengan membuat 5 tag sementara yang tidak diketahui).
Jumlah angka yang dibuat harus ditentukan berdasarkan jumlah tag yang ada yang dipilih dan panjang array data yang dimuat.
Seperti dalam contoh ini, jika ada kurang dari 5 p tag dalam tubuh, itu akan dibuat (sekarang p di dalam tubuh adalah 0, jadi 5 dibuat).
Jika ada lebih dari yang tidak dibuat, jumlah total elemen placeholder terakhir dan elemen P harus 5.
.pon ("p") ubah elemen placeholder ke elemen p
.text (function (d) {}) Tulis fungsi anonim untuk mengontrol konten tampilan dari setiap paragraf, umumnya mengembalikan string. Dalam metode ini Anda bisa menulisnya.
Contoh ini memungkinkannya output saya dapat menghitung hingga setiap paragraf ditambah nilai elemen array yang sesuai
Format fungsi diperbaiki. Hanya dengan cara ini data dapat dimuat ke dalam fungsi.
.Style ("Color", "") mengatur atribut warna teks CSS. Seperti teks, string set dapat dilakukan dengan fungsi untuk melakukan operasi yang Anda inginkan. Dalam contoh ini, jika nilai masuk paragraf yang sesuai lebih besar dari 15, garis akan menjadi merah
Akhirnya, efek yang kita lihat adalah seperti yang ditunjukkan pada gambar:
Artikel ini berakhir dengan artikel ini. Berikut ini adalah cara menggambar lingkaran di SVG dan lingkaran yang menghubungkan diagram gaya sederhana.