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.
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);
});
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.
The svg container will is static it will not change sizes after it is created.
Center a map in d3 given a geoJSON object 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.