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: d3/d3-geo#59
license: gpl-3.0 | |
height: 720 | |
border: no |
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: d3/d3-geo#59
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) | |
}) |
<!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> |