How to calculate projection.scale () in D3.js for a fullscreen world map

I am wondering how to calculate and determine the correct projection.scale ([value]) value for a world map in full screen using D3.js.

The documentation says the default is 150. But what does this "150" mean?

I am trying to draw a world map with the same screen width. I set the svg area to window.innerWidth, but not sure what value I should give the scale for the world map.

In some cases, people get the boundaries of the function they want to put, but I can’t get the boundaries of the whole borders of the world map.

What is the correct 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.

+5
source share

All Articles