4

I'm wondering how to calculate and determine a right value of projection.scale([value]) for a world map in full screen with D3.js.

The documentation says the default value is 150. But what does this "150" stand for?

I'm trying to draw a world map exact same width of the screen. I set svg area to window.innerWidth but not sure what value I should give to the scale for the world map.

In some case people get the bounds of the feature they want to fit but I cannot get bounds of whole bounds of the world map.

What the right way to calculate the scale value in this case? 

width = window.innerWidth;
height = window.innerHeight;

svg = d3.select("#svgArea").append("svg")
    .attr("id", "svg")
    .attr("width", width)
    .attr("height", height);

projection = d3.geo.equirectangular()
    .scale(????)
    .translate([width / 2, height / 2])
    .precision(.1);

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

d3.json("world-50m.json", function(error, world) {
    var land = topojson.feature(world, world.objects.land);
    svg.insert("path", ".graticule")
        .datum(land)
        .attr("class", "land")
        .attr("fill", "#aaaaaa")
        .attr("stroke", "#000000")
        .attr("stroke-width", "0.5px")
        .attr("d", path);
})

Thanks in advance.

leccmo
  • 329
  • 4
  • 16
  • Well, the documentation links to this [example](http://bl.ocks.org/mbostock/3757119) of an equirectangular projection, which uses a scale of 153. – altocumulus May 23 '16 at 19:49
  • Yes most examples are with hard-coded value. I just want to know how I can dynamically calculate this value. – leccmo May 25 '16 at 06:26
  • the [example](http://bl.ocks.org/mbostock/3757119) seems to be updated to use dynamic scaling: .scale(height / Math.PI) – sepans Jul 13 '16 at 23:10
  • 2
    but for better results it needs to consider width as well: .scale(Math.min(width/ Math.PI, height/ Math.PI)) – sepans Jul 13 '16 at 23:11

0 Answers0