dictionary - 从 mapshaper.org 缩小 d3 地图
问题描述
有人可以告诉我我做错了什么。我从 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)
})
解决方案
推荐阅读
- dart - 未调用 IFrameElement EventListener
- ios - IBDesignable 在 Xcode 11 beta 生成的 xcframework 中不起作用
- html - 一个 div 的字体大小未调整大小
- angular - 如何让 componentFactoryResolver 使用 RouterLink 创建锚点?
- javascript - 如何复制 javascript 生成的链接的网址?
- reactjs - 反应路由器渲染与组件给我错误
- jwt - 何时是使用 JWT 注销用户的正确时间,访问令牌到期的时间或刷新令牌的到期时间?
- laravel - 如果条件与 Laravel 中的数组
- vba - 什么是删除访问表单附件控件上的附件的编程方法?
- android - Glide 4.9.0 无法使用 MyAppGlideModule 加载 firebase 图片