D3: get the bounding box of a selected element

Question

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 1

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

Answer 2

You can call "getBBox()" on SVG elements to get their bounding box in terms of SVG coordinates.

var mousemove = function(d){
    var bbox = this.getBBox();
    ...
};

var svg = d3.select("body").append("svg")
    .attr("height", "100")
    .attr("width", "400");

var gPath = svg.append("g");


gPath.append("path")
    .attr("d", "M 250 10 L 320 10 L 350 50 L 290 65 z")
    .attr("fill", "steelblue")
    .on("mousemove", mousemove);

Once you have the bounding box, its a matter of deciding how specifically you want to actually transform the view to zoom into the bounding box. There are a bunch of different approaches so I'll leave that for you to investigate.

Here's a jsFiddle: http://jsfiddle.net/reblace/3rDPC/3/