D3.js - การเข้าร่วมข้อมูล
การรวมข้อมูลเป็นอีกหนึ่งแนวคิดที่สำคัญใน D3.js ทำงานร่วมกับการเลือกและช่วยให้เราสามารถจัดการกับเอกสาร HTML ที่เกี่ยวข้องกับชุดข้อมูลของเรา (ชุดของค่าตัวเลข) โดยค่าเริ่มต้น D3.js จะให้ชุดข้อมูลที่มีลำดับความสำคัญสูงสุดในวิธีการและแต่ละรายการในชุดข้อมูลจะสอดคล้องกับองค์ประกอบ HTML บทนี้อธิบายการรวมข้อมูลโดยละเอียด
การเข้าร่วมข้อมูลคืออะไร?
การรวมข้อมูลช่วยให้เราฉีดแก้ไขและลบองค์ประกอบ (องค์ประกอบ HTML และองค์ประกอบ SVG ที่ฝังอยู่) โดยอิงตามชุดข้อมูลในเอกสาร HTML ที่มีอยู่ ตามค่าเริ่มต้นรายการข้อมูลแต่ละรายการในชุดข้อมูลจะสอดคล้องกับองค์ประกอบ (กราฟิก) ในเอกสาร
เมื่อชุดข้อมูลเปลี่ยนไปองค์ประกอบที่เกี่ยวข้องยังสามารถจัดการได้อย่างง่ายดาย การรวมข้อมูลสร้างความสัมพันธ์ใกล้ชิดระหว่างข้อมูลของเราและองค์ประกอบกราฟิกของเอกสาร การรวมข้อมูลทำให้การจัดการองค์ประกอบตามชุดข้อมูลเป็นกระบวนการที่ง่ายและสะดวกมาก
การเข้าร่วมข้อมูลทำงานอย่างไร
วัตถุประสงค์หลักของการรวมข้อมูลคือการแมปองค์ประกอบของเอกสารที่มีอยู่กับชุดข้อมูลที่กำหนด สร้างการแสดงเสมือนของเอกสารที่เกี่ยวข้องกับชุดข้อมูลที่กำหนดและมีวิธีการทำงานกับการแสดงเสมือน ให้เราพิจารณาชุดข้อมูลง่ายๆดังที่แสดงด้านล่าง
[10, 20, 30, 25, 15]ชุดข้อมูลมีห้ารายการดังนั้นจึงสามารถแมปกับห้าองค์ประกอบของเอกสารได้ ให้เราแมปกับไฟล์li องค์ประกอบของเอกสารต่อไปนี้โดยใช้เมธอด selectAll () ของตัวเลือกและเมธอด data join () ของตัวเลือก
HTML
<ul id = "list">
<li><li>
<li></li>
</ul>รหัส D3.js
d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);ตอนนี้มีองค์ประกอบเสมือนห้าอย่างในเอกสาร องค์ประกอบเสมือนสองรายการแรกคือสององค์ประกอบli องค์ประกอบที่กำหนดในเอกสารดังแสดงด้านล่าง
1. li - 10
2. li - 20เราสามารถใช้วิธีการปรับเปลี่ยนองค์ประกอบของตัวเลือกทั้งหมดเช่น attr(), style(), text()ฯลฯ สำหรับสองคนแรก li ดังแสดงด้านล่าง
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return d; });ฟังก์ชันในเมธอด text () ใช้เพื่อรับไฟล์ liองค์ประกอบที่แมปข้อมูล ที่นี่d เป็นตัวแทน 10 อันดับแรก li องค์ประกอบและ 20 วินาที li ธาตุ.
องค์ประกอบสามรายการถัดไปสามารถแมปกับองค์ประกอบใดก็ได้และสามารถทำได้โดยใช้วิธีการป้อนข้อมูล () และผนวก () ของตัวเลือก วิธี enter () ให้การเข้าถึงข้อมูลที่เหลือ (ซึ่งไม่ได้แมปกับองค์ประกอบที่มีอยู่) และใช้วิธี append () เพื่อสร้างองค์ประกอบใหม่จากข้อมูลที่เกี่ยวข้อง ให้เราสร้างliสำหรับรายการข้อมูลที่เหลือด้วย แผนผังข้อมูลมีดังนี้ -
3. li - 30
4. li - 25
5. li - 15รหัสสำหรับสร้างองค์ประกอบ li ใหม่มีดังนี้ -
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d) { return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });การรวมข้อมูลมีวิธีการอื่นที่เรียกว่า exit() method เพื่อประมวลผลรายการข้อมูลที่ลบออกจากชุดข้อมูลแบบไดนามิกดังที่แสดงด้านล่าง
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()ที่นี่เราได้ลบรายการที่สี่ออกจากชุดข้อมูลและ li ที่เกี่ยวข้องโดยใช้วิธี exit () และ remove ()
รหัสที่สมบูรณ์มีดังนี้ -
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
<style>
body { font-family: Arial; }
</style>
</head>
<body>
<ul id = "list">
<li></li>
<li></li>
</ul>
<input type = "button" name = "remove" value = "Remove fourth value"
onclick = "javascript:remove()" />
<script>
d3.select("#list").selectAll("li")
.data([10, 20, 30, 25, 15])
.text(function(d)
{ return "This is pre-existing element and the value is " + d; })
.enter()
.append("li")
.text(function(d)
{ return "This is dynamically created element and the value is " + d; });
function remove() {
d3.selectAll("li")
.data([10, 20, 30, 15])
.exit()
.remove()
}
</script>
</body>
</html>ผลลัพธ์ของโค้ดด้านบนจะเป็นดังนี้ -