Tôi cần biết chính xác chiều rộng và chiều cao cho một gphần tử tùy ý trong của tôi SVGvì tôi cần vẽ một điểm đánh dấu lựa chọn xung quanh nó khi người dùng đã nhấp vào nó.

Những gì tôi đã nhìn thấy trong internet là cái gì đó như: d3.select("myG").style("width"). Vấn đề là phần tử sẽ không phải lúc nào cũng có tập thuộc tính chiều rộng rõ ràng. Ví dụ, khi tôi tạo một vòng tròn bên trong g, nó sẽ có bộ radious ( r) thay vì chiều rộng. Ngay cả khi tôi sử dụng window.getComputedStylephương thức trên a circle, nó sẽ trả về "tự động".

Có cách nào để tính chiều rộng của một vùng tùy ý svgtrong D3không?

Cảm ơn bạn.

Đối với các phần tử SVG

Sử dụng thứ gì đó giống như selection.node().getBBox()bạn nhận được các giá trị như

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

Đối với các phần tử HTML

Sử dụng selection.node().getBoundingClientRect()

.getBoundsClientRect () trả về kích thước của một phần tử và vị trí của nó so với khung nhìn.

• trái phải
• trên, dưới
• chiều cao chiều rộng

Thí dụ :

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

Có lần tôi gặp phải vấn đề khi không biết phần tử nào hiện được lưu trữ trong biến của mình (svg hoặc html) nhưng tôi cần lấy chiều rộng và chiều cao của nó. Tôi đã tạo chức năng này và muốn chia sẻ nó:

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;
}

Bản demo nhỏ trong đoạn mã ẩn bên dưới. Chúng tôi xử lý nhấp chuột vào div màu xanh và trên vòng tròn svg màu đỏ với chức năng tương tự.

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>