This bl.ock reproduces an error with projection.fitSize
and path.bounds
.
To reproduce the error, comment-in the line retrieving bounds:
// const bounds = path.bounds(conus)
See related issue and fix: https://github.com/d3/d3-geo/issues/59
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
svg {
border: solid red 1px;
}
</style>
<body>
<svg width='480' height='360'></svg>
</body>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://d3js.org/topojson.v1.min.js'></script>
<script src='dist.js'></script>
var svg = d3.select('svg')
var width = +svg.attr('width')
var height = +svg.attr('height')
d3.json('us.json', function (error, us) {
if (error) { throw error }
// Filter US to lower 48 + AK + HI
var conus = topojson.feature(us, {
type: 'GeometryCollection',
geometries: us.objects.states.geometries.filter(function (d) { return d.id < 60; }),
})
// Create projection
var projection = d3.geoAlbersUsa()
// Create path
var path = d3.geoPath().projection(projection)
// Comment-in the following line and the projection gets fitted
// incorrectly.
const bounds = path.bounds(conus)
// Fit projection in half the container.
projection.fitSize([width/2, height/2], conus)
svg.append('path')
.datum(conus)
.attr('d', path)
})