SVG และ D3 Js: การผสมผสานที่ลงตัวสำหรับกราฟิกแบบเวกเตอร์ที่ขับเคลื่อนด้วยข้อมูล

SVG หรือ Scalable Vector Graphics เป็นรูปแบบภาพเวกเตอร์ที่ใช้ XML สำหรับกราฟิกสองมิติพร้อมรองรับการโต้ตอบและภาพเคลื่อนไหว ข้อกำหนด SVG เป็นมาตรฐานเปิดที่พัฒนาโดย World Wide Web Consortium (W3C) ตั้งแต่ปี 1999 D3.js เป็นไลบรารี JavaScript สำหรับจัดการเอกสารตามข้อมูล D3 ช่วยให้คุณทำให้ข้อมูลมีชีวิตชีวาโดยใช้ HTML, SVG และ CSS การเน้นที่มาตรฐานเว็บของ D3 ทำให้คุณมีความสามารถเต็มรูปแบบของเบราว์เซอร์สมัยใหม่ โดยไม่ต้องผูกมัดตัวเองกับเฟรมเวิร์กที่เป็นกรรมสิทธิ์ SVG เป็นรูปแบบมาตรฐานสำหรับการจัดเก็บกราฟิกแบบเวกเตอร์บนเว็บ กราฟิกแบบเวกเตอร์คือกราฟิกประเภทหนึ่งที่ใช้สมการทางคณิตศาสตร์ในการวาดภาพ แทนที่จะใช้ตารางพิกเซล ซึ่งหมายความว่าสามารถปรับขนาดได้ทุกขนาดโดยไม่สูญเสียคุณภาพ สามารถใช้ D3.js เพื่อสร้างกราฟิกแบบเวกเตอร์เชิงโต้ตอบที่ขับเคลื่อนด้วยข้อมูล ซึ่งหมายความว่าสามารถสร้างกราฟิกโดยใช้ข้อมูลจากแหล่งต่างๆ เช่น ไฟล์ CSV, ข้อมูล JSON หรือแม้แต่ข้อมูลสดจาก API ของเว็บ D3.js ยังรองรับภาพเคลื่อนไหว ดังนั้นคุณจึงสามารถสร้าง กราฟิกเชิงโต้ตอบแบบไดนามิก ที่เปลี่ยนแปลงตลอดเวลา

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

วิธีทั่วไปในการแสดงแผนภูมิ D3 คือการใช้ SVG ซึ่งเป็น โมเดลกราฟิก ที่ใช้งานง่าย แต่ไม่ตอบสนองมากนัก ในกรณีส่วนใหญ่ แผนภูมิ SVG สามารถจัดการกับจุดข้อมูลได้ประมาณ 1,000 จุด Canvas เป็นโมเดลกราฟิกโหมดทันทีที่ใช้ใน D3 v4 ซึ่งหมายความว่าตอนนี้คุณสามารถแสดงแผนภูมิได้โดยใช้โมเดลนี้

คุณสามารถสร้างภาพลายเส้นที่ยอดเยี่ยมได้โดยใช้ SVG มันปรับขนาดได้ดีสำหรับจอแสดงผลขนาดใหญ่ที่มี DPI สูงมากโดยไม่ต้องใช้แบนด์วิธมากนัก แม้ว่าจะมีกลไกสำหรับใช้การแปลงเปอร์สเป็คทีฟและลบพื้นผิวที่ซ่อนอยู่ แต่ก็ไม่ได้ออกแบบมาสำหรับ 3D

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

ใช้ D3 Svg หรือไม่

ใช่ d3 อิงตาม svg D3 ย่อมาจาก Data-Driven Documents และใช้มาตรฐานเว็บ เช่น svg, html, css และ javascript เพื่อสร้าง การแสดงภาพข้อมูลเชิงโต้ตอบและไดนามิก ในเบราว์เซอร์

ในส่วนนี้ คุณจะใช้ D3.js เพื่อเพิ่มองค์ประกอบที่ขับเคลื่อนด้วยข้อมูลไปยังหน้าเว็บ ด้วยวิธีนี้ ข้อมูลจะถูกผูกไว้กับองค์ประกอบเหล่านั้นและจากนั้นใช้เพื่อแสดงภาพ หลังจากนั้น เราจะผูกข้อมูลกับองค์ประกอบ DOM เช่นเดียวกับที่เราทำกับ แวดวง SVG ในการผูกข้อมูลกับองค์ประกอบ DOM เราใช้ส่วน D3.js เพื่อผูกข้อมูลกับองค์ประกอบ DOM ด้วยเหตุนี้ เราจึงมีองค์ประกอบวงกลม SVG สามรายการในเว็บไซต์ของเรา: อย่างไรก็ตาม วงกลมไม่ปรากฏเนื่องจากเราไม่ได้ระบุ (กำหนด) คุณลักษณะสำหรับสิ่งเหล่านี้ในการออกแบบของเรา เราใช้ D3.js v6 เพื่อกำหนดรัศมีของวงกลมแต่ละวงและข้อมูลที่เกี่ยวข้อง ด้วยเหตุนี้จึงมีการเพิ่มองค์ประกอบวงกลม SVG สามรายการในชุดข้อมูลของเรา และรัศมีขององค์ประกอบเหล่านี้สอดคล้องกับรัศมีที่กำหนดโดยชุดข้อมูล

ในการระบายสีวงกลม SVG ตามข้อมูล ก่อนอื่นเราต้องดำเนินการกับข้อมูล ในตัวอย่างนี้ เราจะใช้ Chrome JavaScript Console เพื่อเรียกใช้โค้ดข้างต้น เราทำได้มากกว่าเพียงแค่สร้างข้อมูล แม้ว่าเราจะใช้มันเพื่อกำหนดวิธีจัดรูปแบบ เราก็ใช้มันเพื่อกำหนดวิธีจัดรูปร่างด้วย

การใช้ Dom และ Svg ใน D3 คืออะไร?

Document Object Model (DOM) เป็นอินเทอร์เฟซข้ามแพลตฟอร์มและไม่ขึ้นกับภาษาที่ถือว่าเอกสาร XML หรือ HTML เป็นโครงสร้างแบบต้นไม้ โดยที่แต่ละโหนดเป็นวัตถุที่เป็นตัวแทนของส่วนหนึ่งของเอกสาร SVG DOM กำหนดอินเทอร์เฟซสำหรับการโต้ตอบกับ องค์ประกอบกราฟิกแบบเวกเตอร์ เช่น รูปร่าง ข้อความ การไล่ระดับสี และรูปแบบ

ไลบรารีเอกสารที่ขับเคลื่อนด้วยข้อมูล (D3) เป็นไลบรารี JavaScript ที่ให้คุณจัดการเอกสารตามข้อมูล HTML, CSS และ sva เป็นเพียงส่วนหนึ่งของมาตรฐานยอดนิยมที่รองรับ D3 ใช้วิธีการประกาศเพื่อเลือกองค์ประกอบร่วมกับชุดการเลือกของโหนด เวอร์ชันแรกของ D3 ซึ่งเปิดตัวในปี 2554 ยังอยู่ในระหว่างดำเนินการ โดยไลบรารียังอยู่ระหว่างการพัฒนา เนื่องจากเนื้อหาองค์ประกอบ ค่าแอตทริบิวต์ สไตล์ การเปลี่ยน การโต้ตอบแบบไดนามิก และคุณสมบัติอื่นๆ สามารถสร้างและระบุแบบไดนามิกได้ ตัวแปรจึงสามารถสร้างและเปลี่ยนแปลงแบบไดนามิกได้ D3 ยังใช้วิธีข้อมูลที่รวมอาร์เรย์ของข้อมูลและส่งคืนการเลือกเสมือนสามรายการหลังจากการเลือกองค์ประกอบ เมื่อใช้ฟังก์ชันข้อมูล พิกัดกึ่งกลางและรัศมีขององค์ประกอบจะถูกตั้งค่าตามข้อมูลที่ถูกผูกไว้

หากมีองค์ประกอบอยู่แล้วและเชื่อมโยงกับข้อมูล เราจะเลือกตัวเลือกการอัปเดต วิธีนี้จะอัปเดตองค์ประกอบ DOM ที่มีอยู่ด้วยข้อมูลใหม่ แต่จะไม่ลบหรือเพิ่มองค์ประกอบใดๆ เมื่อองค์ประกอบชุดข้อมูลมีจำนวนมากกว่าองค์ประกอบ DOM ระบบจะใช้การเลือกออก ขณะนี้สามารถใช้วิธีการลบของ D3 เพื่อลบองค์ประกอบดังกล่าวได้

แท็ก Svg ใช้สำหรับอะไร

แท็ก svg ใช้เพื่อจัดเก็บกราฟิกของเวกเตอร์ sva กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) เป็นภาษาที่ใช้ XML ซึ่งมีภาพเคลื่อนไหวและการโต้ตอบสำหรับกราฟิกสองมิติ วาดภาพโดยใช้รูปทรงเรขาคณิตอย่างง่าย (วงกลม เส้น รูปหลายเหลี่ยม และอื่นๆ)

เป็นรูปแบบภาพที่มีโครงสร้าง Extensible Markup Language (XML) สำหรับสร้างภาพขนาดเว็บในรูปแบบของไฟล์ XML ซึ่งแตกต่างจากรูปแบบภาพแบบพิกเซลซึ่งสามารถปรับขนาดเพิ่มหรือลดเป็นขนาดใดก็ได้โดยไม่ทำให้คุณภาพการแสดงผลด้อยลง SVG เป็นรูปแบบกราฟิกแบบเวกเตอร์ สามารถขยายให้พอดีกับจอแสดงผลความหนาแน่นต่างๆ พิมพ์ได้ชัดเจนขึ้น และมีการตอบสนองที่ดีขึ้น ค่าของคุณสมบัติ viewBox คำนวณโดยการคูณค่าด้วยค่า min-x, min-y, width และ height ตามกฎการรักษาอัตราส่วน AspectRatio องค์ประกอบ viewBox ต้องอยู่ในวิวพอร์ตที่มีอัตราส่วนกว้างยาวแตกต่างจากองค์ประกอบ คุณสามารถกำหนดภาษาสไตล์ชีตของแฟรกเมนต์เอกสารได้โดยใช้ contentStyleType มี วัตถุกราฟิก สามประเภทที่มีอยู่ใน SVG: การแปลงแบบซ้อน เส้นทางการตัด อัลฟ่ามาสก์ เอฟเฟ็กต์ตัวกรอง และวัตถุเทมเพลต

HTML สามารถใช้เพื่อแสดงรูปภาพจากไฟล์ sva ได้หลายวิธี HTML มักถูกสันนิษฐานว่าเป็น XHTML ซึ่งเป็นภาษาถิ่นของ XML ที่มีข้อจำกัดทางไวยากรณ์ที่เข้มงวดน้อยกว่า XML สามารถสร้างรูปร่างได้โดยการวางองค์ประกอบในส่วน HTML/CSS แต่ละรูปร่างได้รับการอธิบายโดยใช้พารามิเตอร์ที่แตกต่างกันสำหรับขนาดและตำแหน่ง เส้นหลายเหลี่ยม เช่น รูปร่างหลายเหลี่ยมประกอบด้วยส่วนที่เชื่อมต่อเข้าด้วยกัน เนื่องจาก SVG กำลังถูกใช้อย่างแพร่หลายในเบราว์เซอร์ รูปภาพคุณภาพสูงกว่าจึงปรากฏในรูปแบบที่น่าดึงดูดยิ่งขึ้น ยิ่งขนาดไฟล์ใหญ่ขึ้นเท่าใด ภาพในเว็บไซต์ของคุณก็จะยิ่งโหลดเร็วขึ้นด้วย SVG สามารถใช้ CSS และ/หรือ JavaScript เพื่อแก้ไขและทำให้ SVG เคลื่อนไหวได้อย่างง่ายดาย เนื่องจากใช้งานง่ายกว่า JPG, JPEG และ PNG จึงสามารถใช้ในการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ได้

ผู้ใช้มีความต้องการมากขึ้นเพื่อให้เว็บไซต์ของตนดูดีในทุกอุปกรณ์ ซึ่งกำลังกลายเป็นเทรนด์ SVG ช่วยให้คุณทำให้เว็บไซต์ของคุณดูดีบนหน้าจอทุกขนาด ไม่ว่าอุปกรณ์จะเล็กหรือใหญ่เพียงใด นอกจากนี้ เนื่องจากรูปแบบไฟล์ได้รับความนิยมมากขึ้นเรื่อยๆ คุณจึงมีแนวโน้มที่จะเห็นเว็บไซต์ใช้รูปแบบนี้มากขึ้นเรื่อยๆ ในอนาคต