Rumah > Artikel > hujung hadapan web > D3.js bermula dengan penciptaan elemen P (menunjukkan data boleh dimuat)_petua javascript

D3.js bermula dengan penciptaan elemen P (menunjukkan data boleh dimuat)_petua javascript

WBOYasal: 2016-05-16 16:32:361422semak imbas

D3 ialah perpustakaan js visual berdasarkan operasi data Untuk memahami d3, mari mulakan dengan paparan paling asas bagi data boleh dimuatkan.

Saya tidak akan menerangkan secara terperinci tentang rangka kerja asas html, mari mulakan dengan kod dan kemudian terangkan:

Buat direktori ujian baharu dan buat dua folder, demo dan d3, dalam direktori ini. demo menyimpan fail html untuk ditulis dan d3 menyimpan d3.v3.js

Buat indexP.html baharu dalam folder demo, salin kod berikut ke dalamnya, klik dua kali untuk membukanya dalam penyemak imbas untuk melihat kesannya.

<!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) 
.enter() 
.append("p") 
.text(function(d) { 
return "I can count up to " + d; 
}) 
.style("color", function(d) { 
if (d > 15) { //Threshold of 15 
return "red"; 
} else { 
return "black"; 
} 
}); 

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

Fungsi yang dilaksanakan oleh demo ringkas ini: tambah tag p pada badan, tambah kandungan teks yang dimuatkan oleh d3 pada tag p, dan laraskan warna teks mengikut keadaan tetapan fungsi.

Kod halaman web di atas dan kod js dalam kandungan ialah operasi data yang dipaparkan pada halaman tersebut. Untuk banyak contoh pada masa hadapan, anda hanya perlu mengubah suai bahagian ini, dan bahagian lain boleh dianggap sebagai bingkai halaman.

Kandungan di sini secara amnya dibincangkan dalam artikel sebelumnya Gunakan penggabungan d3 untuk menyambung operasi data langkah demi langkah pada objek yang sama untuk penyelenggaraan yang mudah.

d3.select("body") memilih elemen badan dan menyambungkannya ke kaedah seterusnya

.selectAll("p") memilih semua perenggan

.data(set data) menghuraikan dan memuatkan data tatasusunan ialah 5. Setiap kaedah seterusnya akan dilaksanakan sebanyak lima kali pada elemen tatasusunan mengikut urutan mengikut subskrip tatasusunan

.enter() mencipta elemen ruang letak terikat data baharu (bersamaan dengan mencipta 5 teg yang tidak diketahui buat sementara waktu).

Bilangan teg yang dibuat ditentukan oleh bilangan teg sedia ada yang dipilih dan panjang tatasusunan data yang dimuatkan.

Seperti dalam contoh ini, jika terdapat kurang daripada 5 teg p dalam badan, buat mereka (terdapat 0 teg p dalam badan sekarang, jadi 5 teg dicipta),

Jika terdapat lebih daripada satu, ia tidak akan dibuat Jumlah bilangan elemen ruang letak akhir dan elemen p mestilah 5.

.append("p") menukar elemen pemegang tempat kepada elemen p

.text(function(d) {}) Tulis fungsi tanpa nama untuk mengawal kandungan paparan setiap perenggan, biasanya mengembalikan rentetan. Anda boleh menulis apa sahaja yang anda mahu dalam kaedah ini,

Contoh ini membolehkan dia mengeluarkan saya boleh mengira sehingga ditambah nilai elemen tatasusunan yang sepadan untuk setiap perenggan

Format fungsi ditetapkan Hanya dengan cara ini boleh berfungsi(d) memuatkan data ke dalam fungsi.

.style("color","") menetapkan atribut warna teks bagi css Sama seperti teks, rentetan set boleh digunakan untuk melaksanakan operasi yang anda mahu menggunakan fungsi. Dalam contoh ini, jika nilai masuk yang sepadan dengan perenggan lebih besar daripada 15, garisan akan bertukar menjadi merah

Akhir sekali, kesan yang kita lihat adalah seperti yang ditunjukkan di bawah:

Itu sahaja untuk artikel ini yang berikut akan memperkenalkan cara melukis bulatan dalam SVG, serta gambar rajah daya ringkas untuk menyambung bulatan

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Gunakan JS untuk melaksanakan kemahiran addClass, removeClass dan hasClass jQuery functions_javascriptArtikel seterusnya：Gunakan JS untuk melaksanakan kemahiran addClass, removeClass dan hasClass jQuery functions_javascript

Artikel berkaitan

Lihat lagi