D3.js: Bagaimana cara mendapatkan lebar dan tinggi yang dihitung untuk elemen arbitrer?

120

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.

André Pena
sumber

Jawaban:

225

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()

Christopher Hackett
sumber
36
Untuk elemen HTML, gunakan getBoundingClientRect()hanya SVG getBBox(). Seperti:d3.select("body").node().getBoundingClientRect().width
Toph
1
Bisa dilakukan dengan sedikit lebih banyak info untuk membantu. Untuk elemen SVG atau HTML? Apakah hanya Firefox yang menjadi masalah? Apakah ada yang dilaporkan di konsol? Berapa nilai yang dikembalikan? Apakah Anda memiliki contoh kode minimal (jsfiddle) yang menunjukkan masalahnya?
Christopher Hackett
29

.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;
Malik Khalil
sumber
1

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.

Mikhail Shabrikov
sumber