D3: get the bounding box of a selected element

javascript svg d3.js bounding-box
dao hodac picture dao hodac · Jul 2, 2014 · Viewed 19.7k times · Source

I have several elements in a svg and I want to zoom on one of them.

I'd like to do the same as this example but with non geo paths. Something like

d3.select(myElement).bounds() that I can use to pan and zoom my svg

I did not find anything with D3. did I miss something?

Thanks

Answer

Jay Day Zee picture Jay Day Zee · May 2, 2016

The Answer to the original question, and the implied general point is that yes, D3 has a function to access the underlying DOM node, and that no, it doesnt bother to override those functions where not necessary:

d3 has a function ".node()" which returns the the underlying DOM node of the first item in the d3 selection:

d3.select("#usefulSelector").node().getBBox();

for you specifically:

d3.select(myElement).node().getBBox()

docs: https://github.com/mbostock/d3/wiki/Selections#node

Related questions

How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More
D3 Appending Text to a SVG Rectangle

I'm looking to append html onto a rectangle in D3 to give me a multiple line tooltip. The bottom part is how I'm adding a rectangle which may be part of the problem. The top is the code that should …

Read More
How to add a tooltip to an svg graphic?

I have a series of svg rectangles (using D3.js) and I want to display a message on mouseover, the message should be surrounded by a box that acts as background. They should both be perfectly aligned to each other …

Read More