DC.js - ข้อมูลเบื้องต้นเกี่ยวกับ D3.js

D3.js เป็นไลบรารี JavaScript ที่ใช้ในการสร้างภาพแบบโต้ตอบในเบราว์เซอร์ ไลบรารี D3 ช่วยให้เราจัดการองค์ประกอบของเว็บเพจในบริบทของชุดข้อมูล องค์ประกอบเหล่านี้อาจเป็นองค์ประกอบ HTML, SVG หรือ Canvas และสามารถนำมาใช้ลบหรือแก้ไขได้ตามเนื้อหาของชุดข้อมูล เป็นไลบรารีสำหรับจัดการวัตถุ DOM D3.js เป็นตัวช่วยที่มีประโยชน์ในการสำรวจข้อมูล ช่วยให้คุณสามารถควบคุมการนำเสนอข้อมูลของคุณและช่วยให้คุณเพิ่มการโต้ตอบของข้อมูล

D3.js เป็นหนึ่งในเฟรมเวิร์กชั้นนำเมื่อเทียบกับไลบรารีอื่น ๆ นี้เป็นเพราะ; มันทำงานบนเว็บและการแสดงภาพข้อมูลและเป็นระดับองค์กร อีกเหตุผลหนึ่งคือความยืดหยุ่นที่ยอดเยี่ยมซึ่งทำให้นักพัฒนาทั่วโลกสามารถสร้างแผนภูมิขั้นสูงจำนวนมากได้ นอกจากนี้ยังมีการขยายฟังก์ชันการทำงานในระดับที่ดี

ให้เราเข้าใจแนวคิดพื้นฐานของ D3.js ซึ่งมีดังต่อไปนี้ -

• Selections
• เข้าร่วมข้อมูล
• SVG
• Transition
• Animation
• D3.js API

ให้เราเข้าใจแต่ละแนวคิดเหล่านี้โดยละเอียด

การเลือก

การเลือกเป็นหนึ่งในแนวคิดหลักใน D3.js มันขึ้นอยู่กับแนวคิด CSS Selector ผู้ที่เคยใช้และรู้จัก JQuery อยู่แล้วสามารถเข้าใจการเลือกได้อย่างง่ายดาย ช่วยให้เราสามารถเลือก DOM ตามตัวเลือก CSS จากนั้นมีตัวเลือกในการแก้ไขหรือต่อท้ายและลบองค์ประกอบของ DOM

เข้าร่วมข้อมูล

การรวมข้อมูลเป็นอีกหนึ่งแนวคิดที่สำคัญใน D3.js ทำงานร่วมกับการเลือกและช่วยให้เราสามารถจัดการเอกสาร HTML ที่เกี่ยวข้องกับชุดข้อมูลของเรา (ชุดของค่าตัวเลข) โดยค่าเริ่มต้น D3.js จะให้ชุดข้อมูลมีลำดับความสำคัญสูงสุดในวิธีการและแต่ละรายการในชุดข้อมูลจะสอดคล้องกับองค์ประกอบ HTML

SVG

SVG ย่อมาจาก Scalable Vector Graphics. SVG เป็นรูปแบบกราฟิกเวกเตอร์ที่ใช้ XML มันมีตัวเลือกในการวาดรูปทรงต่างๆเช่นเส้นสี่เหลี่ยมวงกลมวงรี ฯลฯ ดังนั้นการออกแบบการแสดงภาพด้วย SVG จึงให้พลังและความยืดหยุ่นมากขึ้น

การเปลี่ยนแปลง

SVG มีตัวเลือกในการแปลงองค์ประกอบรูปร่าง SVG เดียวหรือกลุ่มขององค์ประกอบ SVG SVG transform รองรับการแปล, ปรับขนาด, หมุนและเอียง

การเปลี่ยน

การเปลี่ยนเป็นกระบวนการเปลี่ยนจากสถานะหนึ่งไปเป็นอีกสถานะหนึ่งของรายการ D3.js มีวิธีการเปลี่ยน () เพื่อดำเนินการเปลี่ยนในหน้า HTML

ภาพเคลื่อนไหว

D3.js รองรับภาพเคลื่อนไหวตลอดการเปลี่ยนแปลง ภาพเคลื่อนไหวสามารถทำได้โดยใช้การเปลี่ยนอย่างเหมาะสม การเปลี่ยนภาพเป็นรูปแบบที่ จำกัด ของภาพเคลื่อนไหวคีย์เฟรมที่มีเพียงสองคีย์เฟรม:start และ end. โดยทั่วไปคีย์เฟรมเริ่มต้นคือสถานะปัจจุบันของ DOM และคีย์เฟรมสิ้นสุดคือชุดของแอตทริบิวต์สไตล์และคุณสมบัติอื่น ๆ ที่คุณระบุ การเปลี่ยนเหมาะอย่างยิ่งสำหรับการเปลี่ยนไปยังมุมมองใหม่โดยไม่ต้องใช้รหัสที่ซับซ้อนซึ่งขึ้นอยู่กับมุมมองเริ่มต้น

D3.js API

ให้เราเข้าใจวิธีการที่สำคัญของ D3.js API โดยสังเขป

Collections API

คอลเลกชันเป็นเพียงออบเจ็กต์ที่จัดกลุ่มองค์ประกอบต่างๆให้เป็นหน่วยเดียว เรียกอีกอย่างว่าเป็นภาชนะ ประกอบด้วยวัตถุแผนที่ชุดและรัง

Paths API

เส้นทางใช้ในการวาดรูปสี่เหลี่ยมวงกลมจุดไข่ปลาโพลีไลน์รูปหลายเหลี่ยมเส้นตรงและเส้นโค้ง SVG Paths แสดงโครงร่างของรูปร่างที่สามารถลากเติมเต็มใช้เป็นเส้นทางการตัดหรือทั้งสามอย่างผสมกันก็ได้

Axis API

D3.js มีฟังก์ชันในการวาดแกน แกนประกอบด้วยเส้นขีดและป้ายกำกับ แกนใช้มาตราส่วนดังนั้นแต่ละแกนจะต้องได้รับมาตราส่วนเพื่อใช้งานได้

Zooming API

การซูมช่วยในการปรับขนาดเนื้อหาของคุณ คุณสามารถมุ่งเน้นไปที่ภูมิภาคใดพื้นที่หนึ่งโดยใช้วิธีการคลิกและลาก

API ค่าคั่นระหว่างตัวคั่น

ตัวคั่นคือลำดับของอักขระตั้งแต่หนึ่งตัวขึ้นไปที่ใช้เพื่อระบุขอบเขตระหว่างพื้นที่แยกอิสระในข้อความธรรมดาหรือข้อมูลอื่น ๆ ตัวคั่นฟิลด์คือลำดับของค่าที่คั่นด้วยเครื่องหมายจุลภาค กล่าวโดยย่อคือค่าที่คั่นด้วยตัวคั่นคือ Comma-Separated Values ​​(CSV) หรือ Tab-Separated Values ​​(TSV)