hujung hadapan web
tutorial js
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
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
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Ganti aksara rentetan dalam javascript
Mar 11, 2025 am 12:07 AM
Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi
8 plugin susun atur halaman jquery yang menakjubkan
Mar 06, 2025 am 12:48 AM
Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual
Bina Aplikasi Web Ajax anda sendiri
Mar 09, 2025 am 12:11 AM
Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J
10 JQuery Fun and Games Plugin
Mar 08, 2025 am 12:42 AM
10 Plugin Permainan JQuery yang menyeronokkan untuk menjadikan laman web anda lebih menarik dan meningkatkan keletihan pengguna! Walaupun Flash masih merupakan perisian terbaik untuk membangunkan permainan web kasual, jQuery juga boleh menghasilkan kesan yang mengejutkan, dan walaupun tidak setanding dengan permainan flash aksi tulen, dalam beberapa kes, anda juga boleh bersenang -senang di penyemak imbas anda. permainan jquery tic toe "Hello World" pengaturcaraan permainan kini mempunyai versi jQuery. Kod sumber JQuery Game Composition Crazy Word Ini adalah permainan mengisi kosong, dan ia dapat menghasilkan beberapa hasil yang pelik kerana tidak mengetahui konteks perkataan. Kod sumber JQuery Mine Sweeping Game
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Kandungan kotak beban secara dinamik menggunakan ajax
Mar 06, 2025 am 01:07 AM
Tutorial ini menunjukkan membuat kotak halaman dinamik yang dimuatkan melalui AJAX, membolehkan Refresh Instant tanpa tambah nilai halaman penuh. Ia memanfaatkan JQuery dan JavaScript. Fikirkannya sebagai loader kotak kandungan gaya Facebook tersuai. Konsep Utama: Ajax dan JQuery
JQuery Parallax Tutorial - Latar Belakang Header Animasi
Mar 08, 2025 am 12:39 AM
Tutorial ini menunjukkan cara membuat kesan latar belakang paralaks yang menawan menggunakan jQuery. Kami akan membina sepanduk header dengan imej berlapis yang mewujudkan kedalaman visual yang menakjubkan. Plugin yang dikemas kini berfungsi dengan JQuery 1.6.4 dan kemudian. Muat turun
Cara Menulis Perpustakaan Sesi Kurang Kuki Untuk JavaScript
Mar 06, 2025 am 01:18 AM
Perpustakaan JavaScript ini memanfaatkan Window.Name Property untuk menguruskan data sesi tanpa bergantung pada kuki. Ia menawarkan penyelesaian yang mantap untuk menyimpan dan mengambil pembolehubah sesi di seluruh pelayar. Perpustakaan menyediakan tiga kaedah teras: sesi
