title: D3.js Zoom and Pan to element on Click
body: <p>I've gone through a few posts as to how to zoom to an element within a larger SVG that has a zoom and pan function on its own as well, but without any luck. I have a large map where you can zoom and pan to elements manually which works but i want it to zoom and pan to any element itself when clicked on such an element. I can't seem to get the right values for the transformation.</p>
  
  <p>Here's a jsfiddle of what i've got so far: <a href="http://jsfiddle.net/1gyjd2xt/1/" rel="nofollow">http://jsfiddle.net/1gyjd2xt/1/</a></p>
  
  <pre><code>var svg = d3.select("#svg-container svg");
  
  var container = svg.select("#container");
  
  zoom = d3.behavior.zoom()
      .translate([0, 0])
      .scale(1)
      .scaleExtent([1, 10])
      .on("zoom", zoomed);
  
  svg.call(zoom);
  
  function zoomed() {
      container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  }
  
  
  d3.selectAll(".text").on("click", function () {
  
      var t = d3.transform(d3.select(this).attr("transform")),
          x = t.translate[0],
          y = t.translate[1];
  
      console.log(x);
      console.log(y);
      var scale = 10;
  
      //Zoom to element 
                  //svg.transition()
                    //.call(zoom
                    //.translate( calculate X, calculate Y)
                    //.scale(scale).event);
  
  });
  </code></pre>