D3.js - การลาก API

การลากและวางเป็นหนึ่งในแนวคิดที่คุ้นเคยมากที่สุดใน d3.js บทนี้อธิบายการลากและวิธีการโดยละเอียด

การติดตั้ง

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

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

วิธีการลาก API

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

• d3.drag()
• drag(selection)
• drag.container([container])
• drag.filter([filter])
• drag.subject([subject])
• drag.clickDistance([distance])
• drag.on (ชื่อพิมพ์ [ฟัง])
• d3.dragDisable(window)
• d3.dragEnable (หน้าต่าง [, noclick])

ตอนนี้ให้เราเข้าใจรายละเอียดแต่ละข้อ

d3.drag ()

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

<script>
   var drag = d3.drag();
</script>

ลาก (การเลือก)

วิธีนี้ใช้เพื่อใช้การลากกับการเลือกที่ระบุ คุณสามารถเรียกใช้ฟังก์ชันนี้โดยใช้ไฟล์selection.call. ตัวอย่างง่ายๆถูกกำหนดไว้ด้านล่าง

d3.select(".node").call(d3.drag().on("drag", mousemove));

ที่นี่พฤติกรรมการลากที่ใช้กับองค์ประกอบที่เลือกคือผ่าน selection.call

drag.container([container])

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

function container() {
   return this;
}

drag.filter ([ตัวกรอง])

ใช้เพื่อตั้งค่าตัวกรองสำหรับฟังก์ชันที่ระบุ หากไม่ได้ระบุตัวกรองจะส่งกลับตัวกรองปัจจุบันตามที่กำหนดไว้ด้านล่าง

function filter() {
   return !d3.event.button;
}

drag.subject ([หัวเรื่อง])

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

function subject(d) {
   return d = =  null ? {x: d3.event.x, y: d3.event.y} : d;
}

ในที่นี้หัวเรื่องแสดงถึงสิ่งที่ถูกลาก ตัวอย่างเช่นหากคุณต้องการลากองค์ประกอบสี่เหลี่ยมผืนผ้าใน SVG หัวเรื่องเริ่มต้นคือข้อมูลของสี่เหลี่ยมผืนผ้าที่ลาก

drag.clickDistance ([ระยะทาง])

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

drag.on (ชื่อพิมพ์ [ฟัง])

วิธีนี้ใช้เพื่อตั้งค่าตัวฟังเหตุการณ์สำหรับชื่อพิมพ์ที่ระบุสำหรับการลาก ชื่อพิมพ์คือสตริงที่มีชื่อพิมพ์อย่างน้อยหนึ่งชื่อคั่นด้วยช่องว่าง ชื่อพิมพ์แต่ละชื่อคือประเภท (ไม่บังคับ) ตามด้วยจุด (.) และชื่อเช่น drag.one และ drag.two ประเภทนี้ควรมาจากข้อใดข้อหนึ่งต่อไปนี้ -

• start - เริ่มตัวชี้ใหม่

• drag - ลากตัวชี้ที่ใช้งานอยู่

• end - ไม่ใช้งานตัวชี้ที่ใช้งานอยู่

d3.dragDisable (หน้าต่าง)

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

d3.dragEnable (หน้าต่าง [, noclick])

วิธีนี้ใช้เพื่อเปิดใช้งานการลากและวางการเลือกบนตำแหน่งหน้าต่างที่ระบุ ใช้เพื่อเรียก mouseup เหตุการณ์การกระทำ หากคุณกำหนดค่า noclick เป็นจริงเหตุการณ์การคลิกจะหมดอายุการหมดเวลาเป็นศูนย์มิลลิวินาที

ลาก API - ลากเหตุการณ์

วิธี D3.event ใช้เพื่อตั้งค่าเหตุการณ์การลาก ประกอบด้วยฟิลด์ต่อไปนี้ -

• Target - แสดงถึงพฤติกรรมการลาก

• Type - เป็นสตริงและอาจเป็นอย่างใดอย่างหนึ่งต่อไปนี้ - "start", "drag" หรือ "end"

• Subject - หัวเรื่องการลากกำหนดโดย drag.subject

event.on (ชื่อพิมพ์ [ฟัง])

อ็อบเจ็กต์เหตุการณ์จะแสดงเมธอด event.on เพื่อทำการลาก มีกำหนดดังนี้

d3.event.on("drag", dragged).on("end", ended);