D3 Examples - fitextent test

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Geo (projection fitExtent)</title>
</head>
​
<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
​
canvas {
  margin: 10px;
  background-color: #eee;
}
</style>
​
<body>
  <div id="content">
    <canvas width="640" height="440"></canvas>
  </div>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
​
  <script>
var context = d3.select('#content canvas')
  .node()
  .getContext('2d');
​
var projection = d3.geoEquirectangular();
​
var geoGenerator = d3.geoPath()
  .projection(projection)
  .context(context);
​
function update(geojson) {
  projection.rotate([-603,0]).fitExtent([[20, 20], [620, 420]], geojson);
​
  context.lineWidth = 0.5;
  context.strokeStyle = '#888';
​
  context.beginPath();
  geoGenerator({type: 'FeatureCollection', features: geojson.features})
  context.stroke();
​
  // extent border
  context.beginPath();
  context.setLineDash([2, 2]);
  context.rect(20, 20, 600, 400);
  context.stroke();
}
​
​
​
// REQUEST DATA
d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
  update(json)
})
​
  </script>
</body>
</html>
​
    