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>

ผลลัพธ์ของโค้ดด้านบนจะเป็นดังนี้ -