title: D3.js zoomTo point in a 2D map (projection)
body: <p>I've some issue with D3 zooming.</p>
  
  <p>I've built a map with D3 and topoJSON stuff, and when I search a city, a point appear on the map.</p>
  
  <p>I used this code to have a constrained zoom on my map:
  <a href="http://bl.ocks.org/mbostock/4987520" rel="nofollow">http://bl.ocks.org/mbostock/4987520</a></p>
  
  <p>It's work fine with all my stuff, now I try to improve the experience by adding a zoom to the point after my search.</p>
  
  <p>I've seen some interessant code here for that: <a href="http://bl.ocks.org/mbostock/6242308" rel="nofollow">http://bl.ocks.org/mbostock/6242308</a></p>
  
  <p>But on two links there is two different zoom functions and I don't know how to mix. I've no error on my code, but the zoom go always at the same point (center of the map I think), even if my point return different locations in console log.... Don't understand why</p>
  
  <p>Here is some samples of codes:</p>
  
  <pre><code>var zoom = d3.behavior.zoom()
      .scaleExtent([1, 30])
      .on("zoom", move);
  
   var path = d3.geo.path()
      .projection(projection);
  
   var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
      .call(zoom);
  
   var g = svg.append("g");
  
  //This is called when ajax research
  function setPlaces(jsonData){
      ... code stuff
      var point = [authors[0].birth_place.lon, authors[0].birth_place.lat];
      svg.transition().call(zoomTo(point, 4).event);
  }
  
  function zoomTo(location, scale) {
      var point = projection(location);
      return zoom
         .translate([width / 2 - point[0] * scale, height / 2 - point[1] * scale])
         .scale(scale);
  }
  
  function move() {
  var t = d3.event.translate,
          s = d3.event.scale;
  t[0] = Math.min(width / 2 * (s - 1), Math.max(width / 2 * (1 - s), t[0]));
  t[1] = Math.min(height / 2 * (s - 1) + 230 * s, Math.max(height / 2 * (1 - s) - 230 * s, t[1]));
  zoom.translate(t);
  g.style("stroke-width", 1 / s).attr("transform", "translate(" + t + ")scale(" + s + ")");
  }
  </code></pre>