D3 เป็นไลบรารี Visual JS ตามการทำงานของข้อมูล เพื่อให้เข้าใจ D3 เราเริ่มต้นด้วยการแสดงข้อมูลพื้นฐานที่สามารถโหลดได้มากที่สุด
ฉันจะไม่พูดอะไรมากเกี่ยวกับกรอบพื้นฐานของ HTML ฉันจะใส่รหัสก่อนแล้วจึงอธิบาย:
สร้างไดเรกทอรีทดสอบใหม่และสร้างการสาธิตโฟลเดอร์สองแบบและ D3 ภายใต้ไดเรกทอรีนี้ การสาธิตเก็บไฟล์ html ที่จะเขียนและ d3 เก็บ d3.v3.js
สร้าง indexp.html ใหม่ภายใต้โฟลเดอร์สาธิตคัดลอกรหัสต่อไปนี้และดับเบิลคลิกเพื่อเปิดเอฟเฟกต์ในเบราว์เซอร์
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> d3: การตั้งค่าสไตล์ของวรรคตามเงื่อนไขตามข้อมูล </title> <script type = "text/javascript" src = "../ d3/d3.v3 ชุดข้อมูล = [5, 10, 15, 20, 25]; d3.Select ("body"). selectall ("p") .data (ชุดข้อมูล) .ENTER () .Append ("P") .Text (ฟังก์ชัน (d) {return "ฉันสามารถนับได้ที่" + d;}) </script> </body> </html>ฟังก์ชั่นที่ใช้โดยการสาธิตอย่างง่ายนี้คือ: เพิ่มแท็ก P ลงในร่างกายเพิ่มเนื้อหาข้อความที่โหลดโดย D3 ในแท็ก P และปรับสีข้อความตามเงื่อนไขการตั้งค่าฟังก์ชั่น
รหัสหน้าเว็บด้านบนและรหัส JS ในร่างกายคือการดำเนินการข้อมูลที่แสดงในหน้า สำหรับตัวอย่างมากมายในอนาคตเพียงแค่แก้ไขส่วนนี้และส่วนอื่น ๆ สามารถถือได้ว่าเป็นเฟรมเวิร์กหน้า
บทความก่อนหน้านี้โดยทั่วไปที่นี่พูดถึงการใช้ D3 Conjunction เพื่อเชื่อมต่อการดำเนินการข้อมูลทีละขั้นตอนของวัตถุเดียวกันเพื่อการบำรุงรักษาที่ง่าย
d3.Select ("body") เลือกองค์ประกอบของร่างกายและเชื่อมต่อกับวิธีถัดไป
.SELECTALL ("P") เลือกย่อหน้าทั้งหมด
.Data (ชุดข้อมูล) แยกวิเคราะห์ข้อมูลอาร์เรย์การโหลด ความยาวของอาร์เรย์คือ 5 วิธีการที่ต่อกันจะถูกดำเนินการห้าครั้งในอนาคต ดำเนินการวิธีการในองค์ประกอบอาร์เรย์ตามลำดับตามตัวห้อยอาร์เรย์
.ENTER () สร้างองค์ประกอบตัวยึดตำแหน่งสำหรับข้อมูลที่ถูกผูกไว้ใหม่ (เทียบเท่ากับการสร้างแท็กที่ไม่รู้จักชั่วคราว 5 รายการ)
จำนวนของตัวเลขที่สร้างขึ้นควรถูกกำหนดตามจำนวนแท็กที่มีอยู่ที่เลือกและความยาวของอาร์เรย์ข้อมูลที่โหลด
ดังในตัวอย่างนี้หากมีแท็กน้อยกว่า 5 P ในร่างกายมันจะถูกสร้างขึ้น (ตอนนี้ p ในร่างกายคือ 0 ดังนั้น 5 จึงถูกสร้างขึ้น)
หากมีมากกว่าที่ไม่ได้สร้างจำนวนทั้งหมดขององค์ประกอบตัวยึดตำแหน่งสุดท้ายและองค์ประกอบ P ต้องเป็น 5
.append ("P") เปลี่ยนองค์ประกอบตัวยึดตำแหน่งเป็นองค์ประกอบ P
.Text (ฟังก์ชั่น (d) {}) เขียนฟังก์ชั่นที่ไม่ระบุชื่อเพื่อควบคุมเนื้อหาการแสดงผลของแต่ละย่อหน้าโดยทั่วไปจะส่งคืนสตริง ในวิธีนี้คุณสามารถเขียนได้
ตัวอย่างนี้ช่วยให้เขาส่งออกฉันสามารถนับได้ในแต่ละย่อหน้ารวมถึงค่าองค์ประกอบอาร์เรย์ที่เกี่ยวข้อง
รูปแบบฟังก์ชั่นได้รับการแก้ไข ด้วยวิธีนี้ข้อมูลสามารถโหลดลงในฟังก์ชั่นได้เท่านั้น
.Style ("สี", "") ตั้งค่าแอตทริบิวต์สีข้อความของ CSS เช่นเดียวกับข้อความสตริงชุดสามารถทำได้ด้วยฟังก์ชั่นเพื่อดำเนินการที่คุณต้องการ ในตัวอย่างนี้หากค่าขาเข้าที่สอดคล้องกันของวรรคมากกว่า 15 เส้นจะเปลี่ยนเป็นสีแดง
ในที่สุดเอฟเฟกต์ที่เราเห็นก็แสดงในรูป:
บทความนี้จบลงด้วยบทความนี้ ต่อไปนี้เป็นวิธีการวาดวงกลมใน SVG และวงกลมที่เชื่อมต่อไดอะแกรมแรงอย่างง่าย