javascript - D3.js: วิธีการหาความกว้างและความสูงที่คำนวณแล้วสำหรับองค์ประกอบใด ๆ?

ฉันจำเป็นต้องรู้ความกว้างและความสูงที่แน่นอนขององค์ประกอบ g ใดๆ ใน SVG ของฉัน เพราะฉันต้องการวาดเครื่องหมายการเลือกรอบๆ มันเมื่อผู้ใช้คลิกมัน

สิ่งที่ฉันเห็นบนอินเทอร์เน็ตคืออะไรทำนองนี้: d3.select("myG").style("width"). ปัญหาคือว่าองค์ประกอบนั้นจะไม่ได้มีการตั้งค่าแอตทริบิวต์ width แบบชัดเจนเสมอไป ตัวอย่างเช่น เมื่อฉันสร้างวงกลมภายใน g มันจะมีการตั้งค่า radious (r) แทนที่จะเป็น width แม้ว่าฉันจะใช้วิธี window.getComputedStyle กับ circle มันก็จะคืนค่าเป็น "auto"

มีวิธีใดในการคำนวณความกว้างขององค์ประกอบ svg ใด ๆ ใน D3 หรือไม่?

ขอบคุณ

คำตอบ #1

สำหรับองค์ประกอบ SVG

การใช้สิ่งอย่าง selection.node().getBBox() คุณจะได้ค่าประมาณ

{
    height: 5, 
    width: 5, 
    y: 50, 
    x: 20
} 

สำหรับองค์ประกอบ HTML

ใช้ selection.node().getBoundingClientRect()

คำตอบ #2

.getBoundingClientRect() ส่งค่าขนาดขององค์ประกอบและตำแหน่งของมันสัมพันธ์กับมุมมองของหน้าต่าง เราสามารถดึงข้อมูลต่อไปนี้ได้อย่างง่ายดาย

• ซ้าย, ขวา
• บน, ล่าง
• ความสูง, ความกว้าง

ตัวอย่าง :

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;