Saya perlu tahu persis lebar dan tinggi untuk gelemen arbitrer di saya SVGkarena saya perlu menggambar penanda seleksi di sekitarnya setelah pengguna mengkliknya.

Apa yang saya lihat di internet adalah sesuatu seperti: d3.select("myG").style("width"). Masalahnya adalah bahwa elemen tersebut tidak selalu memiliki set atribut lebar eksplisit. Misalnya, ketika saya membuat lingkaran di dalam g, itu akan memiliki rset radious ( ) bukan lebarnya. Bahkan jika saya menggunakan window.getComputedStylemetode pada a circle, itu akan mengembalikan "otomatis".

Apakah ada cara untuk menghitung lebar svgselement arbitrer D3?

Terima kasih.

Untuk elemen SVG

Menggunakan sesuatu seperti selection.node().getBBox()Anda mendapatkan nilai seperti

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

Untuk elemen HTML

Menggunakan selection.node().getBoundingClientRect()

.getBoundingClientRect () mengembalikan ukuran elemen dan posisinya relatif terhadap viewport. Kita bisa dengan mudah mengikuti

• kiri kanan
• atas bawah
• tinggi lebar

Contoh:

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

Suatu ketika saya menghadapi masalah ketika saya tidak tahu elemen mana yang saat ini disimpan dalam variabel saya (svg atau html) tetapi saya perlu mendapatkannya lebar dan tinggi. Saya membuat fungsi ini dan ingin membagikannya:

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

Demo kecil di cuplikan tersembunyi di bawah ini. Kami menangani klik pada div biru dan lingkaran svg merah dengan fungsi yang sama.

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>