D3.js: How to get the computed width and height for an arbitrary element?
Solution 1:
For SVG elements
Using something like selection.node().getBBox() you get values like
{
height: 5,
width: 5,
y: 50,
x: 20
}
For HTML elements
Use selection.node().getBoundingClientRect()
Solution 2:
.getBoundingClientRect() returns the size of an element and its position relative to the viewport.We can easily get following
- left, right
- top, bottom
- height, width
Example :
var element = d3.select('.elementClassName').node();
element.getBoundingClientRect().width;