How to set dafault world map size according to browser window size
I have created a world map using a world-countries.json file which come
default in d3-2.10.0 version. The map I was able to generate was small. I
wanted to know how we can set the default zoom level according to the
browser-size. My map.html file looks like this:
<!DOCTYPE html>
<meta charset="utf-8">
<script src="d3.v2.min.js" type="text/javascript"> </script>
<script src="worldMap.json" type="text/javascript"></script>
<body>
<script>
w=window.innerWidth;
h=window.innerHeight;
document.documentElement.style.overflowX = 'hidden';// for hiding the
horizontal scroll
document.documentElement.style.overflowY = 'hidden';// for hiding the
vertical scroll
projection=d3.geo.mercator().translate([w/2,h/2]);
path=d3.geo.path().projection(projection);
var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);
var g=svg.append("g").selectAll("path").data(worldMap.features).enter()
.append("path").attr("d",path)
.attr("stroke","black")
.attr("fill","tan");
var zoom = d3.behavior.zoom()
.on("zoom",function(){
g.attr("transform","translate("+d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("path").attr("d", path.projection(projection));
});
svg.call(zoom);
</script>
</body>
</html>
No comments:
Post a Comment