title: How can I use SVG translate to center a d3.js projection to given latitude and longitude values?
body: <p>I am using d3 to render a Mercator projection of a GeoJSON world map.</p>
  
  <p>I would like to be able to use d3 to scale, and translate the map to known latitude and longitude values as the user steps through my application.</p>
  
  <p><code>projection.center</code> (<a href="https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-center" rel="nofollow noreferrer">https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-center</a>) does what I'd like, combined with <code>transition().duration()</code>, but this requires redrawing the map and therefore seems expensive to keep repeating. I would like to use the native <code>translate()</code> and <code>scale()</code> methods that come with SVG (<a href="https://developer.mozilla.org/en-US/docs/SVG/Attribute/transform" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/SVG/Attribute/transform</a>).</p>
  
  <p>I've found a few helpful examples, like Mike Bostock's (<a href="http://bl.ocks.org/mbostock/4699541" rel="nofollow noreferrer">http://bl.ocks.org/mbostock/4699541</a>), and useful questions, like the following about centering a map to a given GeoJSON object (<a href="https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object">Center a map in d3 given a geoJSON object</a>), but I am struggling to wrap my head around them.</p>
  
  <p>Please could someone help me center my projection to given latitude and longitude values using SVG's <code>transform="translate(x, y)"</code>?</p>
  
  <p>Many thanks in advance.</p>
  
  <hr>
  
  <p><strong>Edit</strong>
  @Lars: First of all, thank you. I have tried your suggestion, and movement occurs, but the projection appears to move too far. I have included a screenshot and my projection code, below:</p>
  
  <pre><code>var SFMap = {
      initialise: function() {
          var width = "752";
          var height = "420";
          SFMap.projection = d3.geo.mercator()
              .scale(100)
              .translate([width/2, height/2])
              .center([0, 0]);
  
          SFMap.path = d3.geo.path()
              .projection(SFMap.projection);
  
          SFMap.svg = d3.select("#sf__map")
              .append("svg")
              .attr("width", width)
              .attr("height", height);
  
          SFMap.g = SFMap.svg.append("g");
  
          d3.json("world-110m.topo.json", SFMap.draw);
      },
  
      draw: function(error, topology) {
          SFMap.g
              .selectAll("path")
              .data(topojson.feature(topology, topology.objects.countries)
                  .features)
              .enter()
              .append("path")
              .attr("d", SFMap.path)
              .attr("class", "feature");
      },
  </code></pre>
  
  <p><img src="https://i.imgur.com/mLzwZ2A.jpg" alt="Projection movement">
  <a href="https://i.stack.imgur.com/eray4.jpg" rel="nofollow noreferrer">(View full size)</a></p>
  
  <p>The above occurs when <code>translate</code>ing to London - 51.5171° N, 0.1062° W - using the following code:</p>
  
  <pre><code>var coordinates = SFMap.projection([0.1062, 51.5171]);
  SFMap.g.attr("transform", "translate(" + (-coordinates[0]) + "," + (-coordinates[1]) + ")");
  </code></pre>
  
  <p>I have also tried inverting the values a second time.</p>