d3.js. How to make map full width?

Question

Code available here. Map looks like full width, but not at all. There is some indents at the top and left and right sides. All examples of d3.js maps use some strange magic numbers in scale method. I try use such numbers from this answer, but looks like it is not true for my case. So what is true way to scale map? I want to make it full width without any indents on any screen.

var body = d3.select("body").node().getBoundingClientRect();

var coef = 640 / 360;

var width = body.width;
var height = width / coef;

var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height)

var projection = d3.geo.equirectangular()
  .rotate([-180, 0])
  .scale(width / 640 * 100)
  .translate([width / 2, height / 2])

var path = d3.geo.path()
  .projection(projection);


d3.json("https://dl.dropboxusercontent.com/s/20g0rtglh9xawb8/world-50m.json?dl=1", function(error, world) {
  svg.append("path")
    .datum(topojson.feature(world, world.objects.land))
    .attr("d", path);
});

Are you looking for [this](https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object)? — Lars Kotthoff, Jun 03 '15 at 21:34
May be, but i do not know what is `json` variable in example you provide. I use standard `world-50m.json` data file from topojson package. So if i provide `world` variable to path.bounds() method i gave array with infinities... — zeleniy, Jun 03 '15 at 22:01
Well, your fiddle doesn't work for me, so I'm not sure what exactly the problem is. — Lars Kotthoff, Jun 03 '15 at 22:03
Right, that seems to work. So the space at the top and bottom is simply because of the aspect ratio and the left and right margins because of the margins of the `body` element. — Lars Kotthoff, Jun 03 '15 at 22:28
Any margins you see will be a result of the scale factor that you set. — Lars Kotthoff, Jun 04 '15 at 16:43
Exactly this i asked in this topic - how to pick right scale factor for my example to remove margins :) — zeleniy, Jun 04 '15 at 16:48
And that's exactly what the question I've linked to in my first comment tells you :) — Lars Kotthoff, Jun 04 '15 at 16:50
I think all you need to do is replace `json` with `topojson.feature(world, world.objects.land)`. — Lars Kotthoff, Jun 04 '15 at 17:22
Yes, you're right! Thank you very much! But this is only solve problem of margins from left and right. To remove margin from top i change coef from 640 / 360 to 640 / 309. Magic numbers still here. There is new [fiddle without margins](http://jsfiddle.net/zeleniy/1zs9vdpg/) — zeleniy, Jun 04 '15 at 20:04
You would be distorting the map if you want it to stretch to the full window. — Lars Kotthoff, Jun 04 '15 at 20:53

d3.js. How to make map full width?

0 Answers0