D3.js - API การเปลี่ยน

การเปลี่ยน D3 ใช้การเลือกองค์ประกอบและสำหรับแต่ละองค์ประกอบ มันใช้การเปลี่ยนเป็นส่วนหนึ่งของคำจำกัดความปัจจุบันขององค์ประกอบ

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

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

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

วิธีการเปลี่ยน API

ให้เราดูรายละเอียดวิธีการเปลี่ยน API

การเลือกองค์ประกอบ

ให้เราพูดคุยเกี่ยวกับองค์ประกอบการเลือกต่างๆโดยละเอียด

selection.transition([name])- วิธีนี้ใช้เพื่อส่งคืนการเปลี่ยนแปลงการเลือกใหม่ด้วยชื่อ หากไม่ได้ระบุชื่อจะส่งกลับค่าว่าง
selection.interrupt([name]) - วิธีนี้ใช้เพื่อขัดจังหวะองค์ประกอบที่เลือกของการเปลี่ยนแปลงด้วยชื่อและกำหนดไว้ด้านล่าง

selection.interrupt().selectAll("*").interrupt();

d3.interrupt(node[, name]) - วิธีนี้ใช้เพื่อขัดจังหวะการเปลี่ยนชื่อที่ระบุบนโหนดที่ระบุ
d3.transition([name]) - วิธีนี้ใช้เพื่อส่งคืนการเปลี่ยนแปลงใหม่ด้วยชื่อที่ระบุ
transition.select(selector) - วิธีนี้ใช้เพื่อเลือกองค์ประกอบแรกที่ตรงกับตัวเลือกที่ระบุและส่งกลับการเปลี่ยนแปลงในการเลือกผลลัพธ์ซึ่งกำหนดไว้ด้านล่าง

transition
   .selection()
   .select(selector)
   .transition(transition)

transition.selectAll(selector)- วิธีนี้ใช้เพื่อเลือกองค์ประกอบทั้งหมดที่ตรงกับตัวเลือกที่ระบุและส่งกลับการเปลี่ยนแปลงในการเลือกผลลัพธ์ มีการกำหนดไว้ด้านล่าง -

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

transition.filter(filter) - วิธีนี้ใช้ในการเลือกองค์ประกอบที่ตรงกับตัวกรองที่ระบุซึ่งกำหนดไว้ด้านล่าง

transition
   .selection()
   .filter(filter)
   .transition(transition)

transition.merge(other)- วิธีนี้ใช้เพื่อผสานการเปลี่ยนแปลงกับการเปลี่ยนแปลงอื่น ๆ มีการกำหนดไว้ด้านล่าง

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

transition.transition()- วิธีนี้ใช้เพื่อส่งคืนการเปลี่ยนแปลงใหม่ในองค์ประกอบที่เลือก มีกำหนดเริ่มต้นเมื่อการเปลี่ยนแปลงหยุดลง การเปลี่ยนแปลงใหม่จะสืบทอดชื่อระยะเวลาและการค่อยๆเปลี่ยนของการเปลี่ยนแปลงนี้

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

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

ร่างกายจะจางหายไปเป็นสีเหลืองและเริ่มเพียงห้าวินาทีก่อนการเปลี่ยนแปลงครั้งสุดท้าย

d3.active(node[, name]) - วิธีนี้ใช้เพื่อส่งคืนการเปลี่ยนแปลงบนโหนดที่ระบุด้วยชื่อ

วิธีการกำหนดเวลา

ให้เราดูรายละเอียดเกี่ยวกับวิธีการกำหนดเวลาการเปลี่ยน API

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

transition.delay(function(d, i) { return i * 10; });

transition.duration([value])- วิธีนี้ใช้เพื่อกำหนดระยะเวลาการเปลี่ยนเป็นค่าที่ระบุ หากไม่ได้ระบุค่าไว้ให้ส่งคืนค่าปัจจุบันของระยะเวลาสำหรับองค์ประกอบแรก (ไม่ใช่ค่าว่าง) ในการเปลี่ยน
transition.ease([value])- วิธีนี้ใช้เพื่อลดค่าการเปลี่ยนแปลงสำหรับองค์ประกอบที่เลือก มีการเรียกใช้ฟังก์ชันการค่อยๆเปลี่ยนสำหรับแต่ละเฟรมของภาพเคลื่อนไหวและส่งผ่านเวลาปกติ "t" ในช่วง [0, 1] หากไม่ได้ระบุค่าจะส่งคืนฟังก์ชันการค่อยๆเปลี่ยนปัจจุบันสำหรับองค์ประกอบแรก (ไม่ใช่ค่าว่าง) ในการเปลี่ยน

ในบทต่อไปเราจะพูดถึงแนวคิดการลากและวางใน d3.js