score:1

You don't go into the details of how you're calling the different methods, but here's a few general tips on how to work with them:

fitExtent or the short hand version fitSize should definitely make your object appear on the SVG if you're not applying any other transformations. A minimum working example would be:

const proj = d3.geoAlbers()
        .fitSize([width, height], wisconsin)

That should result in a nicely fitted, albeit not correctly rotated Wisconsin. If it doesn't, wisconsin is not a valid GeoJSON object, ie not a FeatureCollection, single Feature or geometric object.

enter image description here

The next question is how to fix the rotation. For conic projections, as I understand, you generally want to find the center of your object of interest and rotate by the inverse of the longitude. A very friendly StackOverflow user explained the details here: https://stackoverflow.com/a/41133970/4745643

In the case of Wisconsin the center of the state has a longitude of almost exactly -90°, so we do this:

const proj = d3.geoAlbers()
    .rotate([90, 0, 0])
    .fitSize([width, height], wisconsin)

Note that we're rotating the map before we fit the object into our SVG. As a general rule of thumb, you should apply spherical transforms before zooming and fitting your map (I shall follow up with a more detailed explanation in a moment).

That should leave you with a nicely rotated and fitted state:

enter image description here


Related Query

More Query from same tag