javascript - tamaño - D3.js: ¿Cómo obtener el ancho y la altura calculados para un elemento arbitrario?

javascript alto de pantalla

Question

Necesito saber exactamente el ancho y la altura de un elemento g arbitrario en mi SVG porque 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á el radioso ( r ) establecido en lugar del ancho. Incluso si uso el método window.getComputedStyle en un circle , devolverá "auto".

¿Hay alguna manera de calcular el ancho de un evento svg arbitrario en D3 ?

Gracias.

Answer 1

.getBoundingClientRect () devuelve el tamaño de un elemento y su posición relativa a la ventana gráfica. Podemos seguir fácilmente

• izquierda derecha
• arriba, abajo
• anchura altura

Ejemplo:

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

Answer 2

Para elementos SVG

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

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

Para elementos HTML

Utilice selection.node().getBoundingClientRect()

Answer 3

Una vez que me enfrenté con el problema cuando no sabía cuál era el elemento actualmente almacenado en mi variable (svg o html), pero necesitaba obtenerlo de ancho y 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. Nos ocupamos de hacer clic en el div azul y en el círculo rojo svg con la misma función.

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>