D3.js zooming on specific path after loading finished

Question

I want to triggle an event on a path with D3.js. Here a working example: http://jsfiddle.net/kwoxer/kpL1uyy2/

So how can I say that a specific path is triggered by the zoomIntoArea function. I mean at the end I have some pathes and I want to load one specific at startup without clicking on it. I already tried:

zoomIntoArea(d3.select("lines"))

and some others but for sure that does not give me back the correct element.

Answer 1

You don't need the zoom behavior to explicitly zoom to a path, e.g.:

var bounds = path.bounds(d),
        dx = bounds[1][0] - bounds[0][0],
        dy = bounds[1][1] - bounds[0][1],
        x = (bounds[0][0] + bounds[1][0]) / 2,
        y = (bounds[0][1] + bounds[1][1]) / 2,
        scale = .9 / Math.max(dx / width, dy / height),
        translate = [
            width / 2 - scale * x, 
            height / 2 - scale * y];

svg.transition()
    .duration(750)
    .attr("transform", "translate(" + 
        translate + ")scale(" + 
        scale + ")");