Can someone pls tell me what i'm doing wrong. I exported a topojson from mapshaper.org. Then I drew the map using the d3. But the map appears zoomed out(very small). How do I get it to be properly scaled and centered. Pls note that i've used some solutions on stackoverflow and I've tried fitExtent. The issue with fitExtent is that I will not be able to translate the map later when I need to. I want the loaded map to appear scaled and centered. Here's the code to draw the map
let width = 900
let height = 500
let svg = null
let chartContainer = null
// load data
let map = {}
const inputFilepath3 = '../Data/nigeria.topojson'
const data = await d3.json(inputFilepath3)
const object = data.objects.gadm36_NGA_1
map.features = topojson.feature(data, object).features
// build container
if (!svg) {
svg = d3.select('body')
.append('svg')
chartContainer = svg.append('g')
.classed('chart-container', true)
}[![enter image description here][1]][1]
svg.attr('width', width)
svg.attr('height', height)
// build scale
const colorScale = d3.scaleOrdinal(d3.schemeCategory10)
// build geopath generator
const projection = d3.geoAzimuthalEqualArea()
const geoPath = d3.geoPath(null).projection(projection)
// draw map
let ps = chartContainer.selectAll('path.state').data(map.features)
ps.exit().remove()
ps.enter().append('path').classed('state', true)
.attr('d', geoPath)
.attr('fill', function(d,i) {
return colorScale(i)
})
