D3.js: ¿Cómo obtener el ancho y alto calculados para un elemento arbitrario?

120

Necesito saber exactamente el ancho y la altura de un gelemento arbitrario en mi SVGporque necesito dibujar un marcador de selección a su alrededor una vez que el usuario ha hecho clic en él.

Lo que he visto en internet es algo así como: d3.select("myG").style("width"). El problema es que el elemento no siempre tendrá un atributo de ancho explícito establecido. Por ejemplo, cuando creo un círculo dentro de g, tendrá radious ( r) en lugar del ancho. Incluso si uso el window.getComputedStylemétodo en a circle, devolverá "auto".

¿Hay alguna forma de calcular el ancho de una selección arbitraria svgen D3?

Gracias.

André Pena
fuente

Respuestas:

225

Para elementos SVG

Usando algo como selection.node().getBBox(), obtienes valores como

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

Para elementos HTML

Utilizar selection.node().getBoundingClientRect()

Christopher Hackett
fuente
36
Para elementos HTML, use en getBoundingClientRect()lugar de solo SVG getBBox(). Así:d3.select("body").node().getBoundingClientRect().width
Toph
1
Me vendría bien un poco más de información para ayudar. ¿Para SVG o elementos HTML? ¿Es solo Firefox el problema? ¿Se informa algo en la consola? ¿Cuál es el valor devuelto? ¿Tiene un ejemplo de código mínimo (jsfiddle) que demostró el problema?
Christopher Hackett
29

.getBoundingClientRect () devuelve el tamaño de un elemento y su posición en relación con la ventana gráfica.

  • izquierda derecha
  • arriba, abajo
  • anchura altura

Ejemplo:

var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;
Malik Khalil
fuente
1

Una vez me enfrenté al problema cuando no sabía cuál era el elemento almacenado actualmente en mi variable (svg o html) pero necesitaba obtener el ancho y el alto. Creé esta función y quiero compartirla:

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

Pequeña demostración en el fragmento oculto a continuación. Manejamos clic en el div azul y en el círculo svg rojo con la misma función.

Mikhail Shabrikov
fuente