D3.js - การเลือก

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

D3.js ช่วยในการเลือกองค์ประกอบจากหน้า HTML โดยใช้สองวิธีต่อไปนี้ -

select()- เลือกองค์ประกอบ DOM เพียงรายการเดียวโดยจับคู่ตัวเลือก CSS ที่กำหนด หากมีองค์ประกอบมากกว่าหนึ่งรายการสำหรับตัวเลือก CSS ที่ระบุองค์ประกอบนั้นจะเลือกองค์ประกอบแรกเท่านั้น
selectAll()- เลือกองค์ประกอบ DOM ทั้งหมดโดยจับคู่ตัวเลือก CSS ที่กำหนด หากคุณคุ้นเคยกับการเลือกองค์ประกอบด้วย jQuery ตัวเลือก D3.js นั้นแทบจะเหมือนกัน

ให้เราทำตามแต่ละวิธีโดยละเอียด

เลือก () วิธีการ

วิธี select () จะเลือกองค์ประกอบ HTML ตาม CSS Selectors ใน CSS Selectors คุณสามารถกำหนดและเข้าถึงองค์ประกอบ HTML ได้สามวิธีต่อไปนี้ -

แท็กขององค์ประกอบ HTML (เช่น div, h1, p, span ฯลฯ )
ชื่อคลาสขององค์ประกอบ HTML
รหัสขององค์ประกอบ HTML

ให้เราดูการใช้งานจริงพร้อมตัวอย่าง

การเลือกโดยแท็ก

คุณสามารถเลือกองค์ประกอบ HTML โดยใช้ TAG ไวยากรณ์ต่อไปนี้ใช้เพื่อเลือกองค์ประกอบแท็ก“ div”

d3.select(“div”)

Example - สร้างเพจ“ select_by_tag.html” และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div>
         Hello World!    
      </div>
      
      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

เมื่อขอเว็บเพจผ่านเบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้บนหน้าจอ -

เลือกตามชื่อชั้นเรียน

องค์ประกอบ HTML ที่มีสไตล์โดยใช้คลาส CSS สามารถเลือกได้โดยใช้ไวยากรณ์ต่อไปนี้

d3.select(“.<class name>”)

สร้างหน้าเว็บ“ select_by_class.html” และเพิ่มการเปลี่ยนแปลงต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

เมื่อขอเว็บเพจผ่านเบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้บนหน้าจอ -

เลือกตาม ID

ทุกองค์ประกอบในหน้า HTML ควรมีรหัสเฉพาะ เราสามารถใช้ ID เฉพาะขององค์ประกอบนี้เพื่อเข้าถึงโดยใช้เมธอด select () ตามที่ระบุด้านล่าง

d3.select(“#<id of an element>”)

สร้างหน้าเว็บ“ select_by_id.html” และเพิ่มการเปลี่ยนแปลงต่อไปนี้

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "hello">
         Hello World!
      </div>
      
      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

เมื่อขอหน้าเว็บผ่านเบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้บนหน้าจอ

การเพิ่มองค์ประกอบ DOM

การเลือก D3.js ให้ไฟล์ append() และ text()วิธีการผนวกองค์ประกอบใหม่ลงในเอกสาร HTML ที่มีอยู่ ส่วนนี้จะอธิบายเกี่ยวกับการเพิ่มองค์ประกอบ DOM โดยละเอียด

วิธีผนวก ()

append () วิธีการผนวกองค์ประกอบใหม่เป็นลูกสุดท้ายขององค์ประกอบในการเลือกปัจจุบัน วิธีนี้ยังสามารถปรับเปลี่ยนรูปแบบขององค์ประกอบคุณลักษณะคุณสมบัติ HTML และเนื้อหาข้อความ

สร้างหน้าเว็บ“ select_and_append.html” และเพิ่มการเปลี่ยนแปลงต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

ขอเว็บเพจผ่านเบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้บนหน้าจอ

ที่นี่ append () วิธีการเพิ่มช่วงแท็กใหม่ภายในแท็ก div ดังที่แสดงด้านล่าง -

<div class = "myclass">
   Hello World!<span></span>
</div>

ข้อความ () วิธีการ

วิธี text () ใช้เพื่อตั้งค่าเนื้อหาขององค์ประกอบที่เลือก / ผนวก ให้เราเปลี่ยนตัวอย่างด้านบนและเพิ่ม text () วิธีการดังที่แสดงด้านล่าง

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

ตอนนี้รีเฟรชหน้าเว็บและคุณจะเห็นคำตอบต่อไปนี้

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

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

การปรับเปลี่ยนองค์ประกอบ

D3.js มีวิธีการต่างๆ html(), attr() และ style()เพื่อแก้ไขเนื้อหาและรูปแบบขององค์ประกอบที่เลือก ให้เราดูวิธีใช้วิธีการปรับเปลี่ยนในบทนี้

html () วิธีการ

วิธี html () ใช้เพื่อตั้งค่าเนื้อหา html ขององค์ประกอบที่เลือก / ผนวก

สร้างหน้าเว็บ“ select_and_add_html.html” และเพิ่มรหัสต่อไปนี้

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

เมื่อขอหน้าเว็บผ่านเบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้บนหน้าจอ

วิธี attr ()

เมธอด attr () ใช้เพื่อเพิ่มหรืออัพเดตแอตทริบิวต์ขององค์ประกอบที่เลือก สร้างหน้าเว็บ“ select_and_modify.html” และเพิ่มรหัสต่อไปนี้

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

เมื่อขอหน้าเว็บผ่านเบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้บนหน้าจอ

สไตล์ () วิธีการ

วิธีการ style () ใช้เพื่อตั้งค่าคุณสมบัติสไตล์ขององค์ประกอบที่เลือก สร้างหน้าเว็บ“ select_and_style.html” และเพิ่มรหัสต่อไปนี้

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

เมื่อขอหน้าเว็บผ่านเบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้บนหน้าจอ

วิธีการจัดประเภท ()

เมธอด classed () ใช้เฉพาะเพื่อตั้งค่าแอตทริบิวต์ "class" ขององค์ประกอบ HTML เนื่องจากองค์ประกอบ HTML เดียวสามารถมีหลายคลาสได้ เราต้องระมัดระวังในขณะที่กำหนดชั้นเรียนให้กับองค์ประกอบ HTML วิธีนี้รู้วิธีจัดการคลาสหนึ่งหรือหลายคลาสในองค์ประกอบและจะมีประสิทธิภาพ

Add class- ในการเพิ่มคลาสต้องตั้งค่าพารามิเตอร์ที่สองของเมธอดคลาสเป็น true มีการกำหนดไว้ด้านล่าง -

d3.select(".myclass").classed("myanotherclass", true);

Remove class- ในการลบคลาสต้องตั้งค่าพารามิเตอร์ที่สองของเมธอดคลาสเป็น false มีการกำหนดไว้ด้านล่าง -

d3.select(".myclass").classed("myanotherclass", false);

Check class- ในการตรวจสอบการมีอยู่ของคลาสเพียงแค่ปล่อยพารามิเตอร์ที่สองและส่งชื่อคลาสที่คุณกำลังค้นหา สิ่งนี้จะคืนค่าเป็นจริงหากมีอยู่จริงเป็นเท็จหากไม่มี

d3.select(".myclass").classed("myanotherclass");

สิ่งนี้จะคืนค่าเป็นจริงหากองค์ประกอบใด ๆ ในการเลือกมีคลาส ใช้d3.select สำหรับการเลือกองค์ประกอบเดียว

Toggle class - หากต้องการพลิกคลาสไปยังสถานะตรงกันข้าม - ลบคลาสออกหากมีอยู่แล้วให้เพิ่มหากยังไม่มี - คุณสามารถดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้

สำหรับองค์ประกอบเดียวโค้ดอาจมีลักษณะดังที่แสดงด้านล่าง -

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

วิธี selectAll ()

วิธีการ selectAll () ใช้เพื่อเลือกหลายองค์ประกอบในเอกสาร HTML วิธีการเลือกจะเลือกองค์ประกอบแรก แต่เมธอด selectAll จะเลือกองค์ประกอบทั้งหมดที่ตรงกับสตริงตัวเลือกที่ระบุ ในกรณีที่การเลือกไม่ตรงกับไม่มีเลยระบบจะส่งกลับการเลือกที่ว่างเปล่า เราสามารถเชื่อมโยงวิธีการแก้ไขต่อท้ายทั้งหมดappend(), html(), text(), attr(), style(), classed(),ฯลฯ ในเมธอด selectAll () เช่นกัน ในกรณีนี้วิธีการจะมีผลต่อองค์ประกอบที่ตรงกันทั้งหมด ให้เราทำความเข้าใจโดยการสร้างหน้าเว็บใหม่“ select_multiple.html” และเพิ่มสคริปต์ต่อไปนี้ -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

เมื่อขอหน้าเว็บผ่านเบราว์เซอร์คุณจะเห็นผลลัพธ์ต่อไปนี้บนหน้าจอ

ที่นี่วิธี attr () ใช้กับทั้งสองอย่าง div และ h2 tag และสีของข้อความในแท็กทั้งสองจะเปลี่ยนเป็นสีแดง