0

有人可以告诉我我做错了什么。我从 mapshaper.org 导出了一个 topojson。然后我用d3画了地图。但是地图看起来缩小了（非常小）。如何让它正确缩放和居中。请注意，我在 stackoverflow 上使用了一些解决方案，并且尝试了 fitExtent。fitExtent 的问题是我以后需要时无法翻译地图。我希望加载的地图按比例显示并居中。这是绘制地图的代码

   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)
                       })
4

0 回答 0