title: [D3][SVG] zoom to object
body: <p>could you please help me with zooming to SVG objects. no idea how to do this.
  i need to zoom and center by click on object, i've made a test plunkr, so please take a look: <a href="http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF" rel="nofollow">http://plnkr.co/edit/ZQxhQ8VVoIXjMvdFIvQF</a><br>
  here's full code:</p>
  
  <pre><code>$(function(){
    svg = d3.select("#svg");
    svg_group = d3.select('#outer_group');
  
    zoom = d3.behavior.zoom()
        .translate([0, 0])
        .scale(1)
        .scaleExtent([.5, 20])
        .on("zoom", zoomed);
  
    svg.call(zoom);
  
    function zoomed() {
      svg_group.style("stroke-width", 1.5 / d3.event.scale + "px");
      svg_group.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
      $zoomService.$broadcast('zoom', {
          scale: d3.event.scale
      });
    }
  
    $('.sector').click(function(){
      //zoom to somehow??
    });
  });
  </code></pre>