block by gabrielflorit bb7ed6a56dbd5f66ee8c06b88a2b4f09

geoAlbersUsa.fitSize error

Full Screen

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

index.html

<!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>

dist.js

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)

})