Question

I have successfully loaded geoJSON files loaded the feature collection into a

d3.geo.path() 

The problem with my current implementation is that it starts off the scaling such that the path is a point, and I have to zoom in each time. Now I know there are plenty of methods to about setting the zoom level right, but I was hoping to use

d3.geo.bounds()

Given the following geoJSON feature:

json.features[0]:

Object
geometry: Object
coordinates: Array[2]
0: -71.248913
1: 44.078426
length: 2
__proto__: Array[0]
type: "Point"
__proto__: Object
id: 2
type: "Feature"
__proto__: Object

and

json.features[1]:

Object
geometry: Object
coordinates: Array[2]
0: -71.249021
1: 44.078387
length: 2
__proto__: Array[0]
type: "Point"
__proto__: Object
id: 3
type: "Feature"
__proto__: Object

If I execute

d3.geo.bounds(json.features)

I get infinity for the bounds:

d3.geo.bounds(json.features)
[
Array[2]
0: Infinity
1: Infinity
length: 2
__proto__: Array[0]
, 
Array[2]
0: -Infinity
1: -Infinity
length: 2
__proto__: Array[0]
]

I’m unsure what is wrong, clearly I have a much larget dataset than above, but I’m just trying to understand the output. This output does not make sense to me and clearly missing something simple about d3 handling of geoJSON data. Any help to get the bounds to work would be helpful.

Thanks.

Answer 1

d3.geo.bounds takes a single Feature or a FeatureCollection as argument, not an array of features. See the documentation. You need to call e.g.

d3.geo.bounds(json.features[0])

If you want a bounding box that contains all features, you need to get the bounding box for each one in turn and then calculate the union of those.