title: D3 Geo Mapping Fitting Map to SVG Container
body: <p>I am drawing a map in d3.js. I want my map to fill my svg container. It should be stretch or shrink as a function of the svg height and width.</p>
  
  <pre><code>    var width = 500;
      var height = 700;
  
      var projection = d3.geo.mercator()
          .scale((width + 1) / 2 / Math.PI)
          .translate([width / 2, height / 2])
          .precision(.1);
  
      var svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height)
          .attr("border", border);
  
      var path = d3.geo.path()
          .projection(projection);
  
      var g = svg.append("g");
  
      d3.json("world.json", function(error, topology) {
          g.selectAll("path")
              .data(topojson.feature(topology, topology.objects.countries).features)
              .enter()
              .append("path")
              .attr("d", path);
      });
  </code></pre>
  
  <p>I think I am close with the projection I am defining. My translation function centers the map where I want it and my scale function resizes my map in terms of width. So that as svg width container changes size the map will stretch or shrink as needed. Ideally I would like to scale by x and scale by y (width, height). I saw in some other post that you can define a layer for the map (as I am doing now) but apply transforms on the layer. I would like to avoid this is possible and do all the work in the projection.</p>
  
  <p>The svg container will is static it will not change sizes after it is created. </p>
  
  <p><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> does not answer my question because it computes the scale based on a feature. I need to know how to compute it based on the svg container.</p>