I could really benefit from some help regarding this aspect. I loaded a basic geojson file with d3js and I am trying to display the whole area by default. Currently, the default behavior is a bit too "zoomed-in" and I cannot see the entire area unless I zoom out a bit. If I use an even smaller area (like a county) it is too "zoomed-out";
What I would like to know is how can I make the area containing the map to show the extent that I would like.
The following example is the one "zoomed-in":
Current behavior here: https://lh6.googleusercontent.com/-398lXVIQwVg/U6widiWTlTI/AAAAAAAAAJE/HeAmhdgRGrs/s1600/wrong.PNG
Desired behavoir here: https://lh6.googleusercontent.com/-w3UJ6m3uwBI/U6wimuRvuiI/AAAAAAAAAJM/ufCnO-GzM30/s1600/good.PNG
My current code is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Display Map</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
</style>
</head>
<body>
<script>
// Variables
var svgWidth = 400,
svgHeight = 400,
margin = {"top": 25, "right": 25, "bottom": 25, "left": 25},
width = svgWidth - margin.left - margin.right,
height = svgHeight - margin.top - margin.bottom;
// Mexico Path (var boundaryPath) taken from
// http://upload.wikimedia.org/wikipedia/commons/c/c5/Blank_Mexico_map%2C_no_States.svg
// taken only for personal, learning purposes
var boundaryPath = "[][][]][][][]"
// Create SVG Viewport
var svgViewport = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("border", "1px solid");
function zoomFunction() {
d3.select("path")
.attr("transform",
"translate(" + d3.event.translate
+ ") scale (" + d3.event.scale + ")");
}
var zoom = d3.behavior.zoom()
.scaleExtent([0.2, 10])
.on("zoom", zoomFunction);
// Define Inner Drawing Space
var innerSpace = svgViewport.append("g")
.attr("class", "inner_space")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(zoom);
innerSpace.append("g").attr("class", "hidden rectangle")
.append("rect")
.attr("class", "background")
.attr("x", function(d, i) { return 0; })
.attr("y", function(d, i) { return 0; })
.attr("width", function(d, i) { return width; })
.attr("height", function(d, i) { return height; })
.style("fill", "white");
// Draw Country Path
var boundaryPath = innerSpace.append("path")
.attr("d", boundaryPath)
.attr("fill", "gray");
</script>
</body>
</html>
Thank you for your time,
