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

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

มีวิธีการคำนวณความกว้างของพลที่svgselement ในD3?

ขอบคุณ.

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

ใช้บางอย่างเช่นselection.node().getBBox()คุณจะได้รับค่าเช่น

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

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

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

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

• ซ้ายขวา
• ด้านบนด้านล่าง
• สูงกว้าง

ตัวอย่าง:

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

เมื่อฉันประสบกับปัญหาเมื่อฉันไม่รู้ว่าองค์ประกอบใดที่เก็บไว้ในตัวแปรของฉัน (svg หรือ html) แต่ฉันต้องการรับความกว้างและความสูง ฉันสร้างฟังก์ชั่นนี้และต้องการแบ่งปัน:

function computeDimensions(selection) {
  var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) { // check if node is svg element
    dimensions = node.getBBox();
  } else { // else is html element
    dimensions = node.getBoundingClientRect();
  }
  console.log(dimensions);
  return dimensions;
}

การสาธิตเล็กน้อยในตัวอย่างข้อมูลที่ซ่อนอยู่ด้านล่าง เราจัดการคลิกที่ div สีน้ำเงินและบนวงกลม svg สีแดงด้วยฟังก์ชันเดียวกัน

var svg = d3.select('svg')
  .attr('width', 50)
  .attr('height', 50);

function computeDimensions(selection) {
	var dimensions = null;
  var node = selection.node();

  if (node instanceof SVGElement) {
   	dimensions = node.getBBox();
  } else {
  	dimensions = node.getBoundingClientRect();
  }
  console.clear();
  console.log(dimensions);
  return dimensions;
}

var circle = svg
    .append("circle")
    .attr("r", 20)
    .attr("cx", 30)
    .attr("cy", 30)
    .attr("fill", "red")
    .on("click", function() { computeDimensions(circle); });
    
var div = d3.selectAll("div").on("click", function() { computeDimensions(div) });

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}

.div {
  display: inline-block;
  background-color: blue;
  margin-right: 30px;
  width: 30px;
  height: 30px;
}

<h3>
  Click on blue div block or svg circle
</h3>
<svg></svg>
<div class="div"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>