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

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

การกำหนดค่า API

คุณสามารถกำหนดค่า API ได้โดยตรงโดยใช้สคริปต์ด้านล่าง

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

วิธีการเลือก API

ต่อไปนี้เป็นวิธีการที่สำคัญที่สุดในการเลือก API

d3.selection()
d3.select(selector)
d3.selectAll(selector)
selection.selectAll(selector)
selection.filter(filter)
selection.merge(other)
d3.matcher(selector)
d3.creator(name)
selection.each(function)
selection.call (ฟังก์ชัน [อาร์กิวเมนต์…])
d3.local()
local.set (โหนดค่า)
local.get(node)
local.remove(node)

ตอนนี้ให้เราคุยรายละเอียดแต่ละเรื่องเหล่านี้

d3.selection ()

วิธีนี้ใช้เพื่อเลือกองค์ประกอบราก ฟังก์ชั่นนี้ยังสามารถใช้เพื่อทดสอบการเลือกหรือเพื่อขยายการเลือก d3js

d3.select (ตัวเลือก)

วิธีนี้ใช้เพื่อเลือกองค์ประกอบแรกที่ตรงกับสตริงตัวเลือกที่ระบุ

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var body = d3.select("body");

หากตัวเลือกไม่ใช่สตริงระบบจะเลือกโหนดที่ระบุซึ่งกำหนดไว้ด้านล่าง

d3.select("p").style("color", "red");

d3.selectAll (ตัวเลือก)

วิธีนี้จะเลือกองค์ประกอบทั้งหมดที่ตรงกับสตริงตัวเลือกที่ระบุ

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var body = d3.selectAll("body");

หากตัวเลือกไม่ใช่สตริงระบบจะเลือกอาร์เรย์ของโหนดที่ระบุซึ่งกำหนดไว้ด้านล่าง

d3.selectAll("body").style("color", "red");

selection.selectAll (ตัวเลือก)

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

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var b = d3.selectAll("p").selectAll("b");

selection.filter (ตัวกรอง)

วิธีนี้ใช้เพื่อกรองการเลือกโดยส่งคืนการเลือกใหม่ที่มีเฉพาะองค์ประกอบที่ตัวกรองที่ระบุเป็นจริง

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var even = d3.selectAll("tr").filter(":nth-child(odd)");

ที่นี่กรองแถวตารางที่เลือกจะส่งกลับค่าคี่เท่านั้น

selection.merge (อื่น ๆ )

วิธีนี้ใช้เพื่อส่งคืนการเลือกใหม่ที่ผสานกับการเลือกอื่น ๆ ที่ระบุ

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (ตัวเลือก)

วิธีนี้ใช้เพื่อกำหนดตัวเลือกที่ระบุ ส่งคืนฟังก์ชันซึ่งส่งคืนจริง

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var p = selection.filter(d3.matcher("p"));

d3.creator (ชื่อ)

วิธีนี้ใช้เพื่อกำหนดชื่อองค์ประกอบที่ระบุมันส่งคืนฟังก์ชันซึ่งสร้างองค์ประกอบของชื่อที่กำหนดโดยสมมติว่าเป็นองค์ประกอบหลัก

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

selection.append(d3.creator("p"));

การเลือกแต่ละ (ฟังก์ชัน)

วิธีนี้ใช้เพื่อเรียกใช้ฟังก์ชันที่ระบุสำหรับแต่ละองค์ประกอบที่เลือกตามลำดับที่ส่งผ่านโดยข้อมูลปัจจุบัน (d) ดัชนีปัจจุบัน (i) และกลุ่มปัจจุบัน (โหนด) โดยมีสิ่งนี้เป็นองค์ประกอบ DOM ปัจจุบัน (โหนด [i ]). มีคำอธิบายด้านล่าง

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (ฟังก์ชัน [อาร์กิวเมนต์…])

ใช้เพื่อเรียกใช้ฟังก์ชันที่ระบุเพียงครั้งเดียว ไวยากรณ์ดังแสดงด้านล่าง

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

วิธีนี้สามารถระบุได้ดังภาพด้านล่าง

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local ช่วยให้คุณสามารถกำหนดสถานะท้องถิ่นที่ไม่ขึ้นกับข้อมูล

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

var data = d3.local();

ซึ่งแตกต่างจาก var ค่าของแต่ละท้องถิ่นจะถูกกำหนดโดย DOM ด้วย

local.set (โหนดค่า)

วิธีนี้ตั้งค่าของโลคัลนี้บนโหนดที่ระบุเป็นค่า

Example - ให้เราพิจารณาตัวอย่างต่อไปนี้

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

วิธีนี้ส่งคืนค่าของโลคัลนี้บนโหนดที่ระบุ หากโหนดไม่ได้กำหนดโลคัลนี้จะส่งคืนค่าจากบรรพบุรุษที่ใกล้ที่สุดที่กำหนด

local.remove (โหนด)

วิธีนี้จะลบค่าของโลคัลนี้ออกจากโหนดที่ระบุ จะคืนค่าจริงถ้าโหนดกำหนดไว้มิฉะนั้นจะส่งคืนเท็จ