How to reduce the size of svg in d3.js?

Question

I'm using a template I found online for overlaying my data on a SVG (rendered by a geoJSON using d3.js). I've included those variables too, as they are as I just wanted to test it.

Using this part of code, I'm able to get my map perfectly, without any cuts on the sides Dimensions (650 x 650):

var w = 650;
var h = 650;
var proj = d3.geo.mercator();
var path = d3.geo.path().projection(proj);
var t = proj.translate();
var s = proj.scale();

var map = d3.select("#chart")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .call(initialize);

function initialize() {
    proj.scale(6700);
    proj.translate([-1240, 750]);
}

But when I change w or h to lower values, say 400 x 400 then it gets trimmed on the sides, when I leave the arguments in proj.scale() and proj.translate() as they are. Can someone please help how I can scale the size to lower dimensions like 400 x 400? (By changing anything in those arguments for scale() or translate())?

Any quick reference link which explains those changes brief and clear is also appreciated.

How to reduce the size of svg in d3.js?

0 Answers