Уменьшенная карта d3 от mapshaper.org - PullRequest
Новая
       35

Уменьшенная карта d3 от mapshaper.org

0 голосов
/ 30 января 2020

Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно. Я экспортировал топо json с mapshaper.org. Затем я нарисовал карту, используя d3. Но карта кажется уменьшенной (очень маленькой). Как мне сделать так, чтобы он был правильно масштабирован и центрирован? Пожалуйста, обратите внимание, что я использовал некоторые решения на стеке потока и я попробовал 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)
                       })
...