D3绘制Mapshaper导出的TopoJSON地图缩放过小问题求助

我来帮你搞定这个地图显示的问题！你遇到的核心问题是投影没有适配地图数据的范围，而之前用fitExtent导致无法平移，是因为没配合正确的缩放交互实现方式。下面一步步给你解决：

问题根源 #

你当前使用的d3.geoAzimuthalEqualArea()投影是默认初始化的，它默认会把整个地球的范围映射到SVG画布中，所以你的尼日利亚地图自然会缩得很小。而且之前的路径生成器写法d3.geoPath(null).projection(projection)也有点冗余，没必要先传null再绑定投影。

正确实现步骤（带平移缩放） #

1. 先初始化投影和路径生成器 #

先创建投影实例，再把它绑定到路径生成器上，不要分开设置：

// 初始化方位等积投影（保持你原来的投影类型）
const projection = d3.geoAzimuthalEqualArea();
// 直接把投影绑定到路径生成器，不用传null
const geoPath = d3.geoPath().projection(projection);

2. 用fitSize或fitExtent适配地图到画布 #

这两个方法会自动计算投影的scale（缩放）和translate（平移）参数，让你的地图刚好适配指定的范围，同时保留后续交互的可能性：

// 用fitSize让地图适配SVG宽高，同时留40px的边距（左右上下各20）
// 第一个参数是目标尺寸，第二个是你的GeoJSON数据对象
projection.fitSize([width - 40, height - 40], topojson.feature(data, object));

// 如果需要更精确的边距控制，比如上下左右各留20px，用fitExtent：
// projection.fitExtent([[20, 20], [width - 20, height - 20]], topojson.feature(data, object));

3. 添加平移缩放交互（解决之前无法平移的问题） #

之前用fitExtent后不能平移，是因为你没有给SVG添加缩放平移的交互逻辑。我们需要用d3.zoom来实现，并且把变换应用到承载地图的<g>元素上，而不是修改投影本身：

// 创建zoom实例，设置缩放范围（1是原始大小，10是最大放大10倍）
const zoom = d3.zoom()
  .scaleExtent([1, 10])
  .on('zoom', (event) => {
    // 将zoom的变换应用到chartContainer这个g元素上
    chartContainer.attr('transform', event.transform);
  });

// 给SVG绑定zoom交互
svg.call(zoom);

4. 修改地图绘制代码 #

确保路径生成器正确使用，去掉冗余的写法：

// draw map
let ps = chartContainer.selectAll('path.state').data(map.features)
ps.exit().remove()
ps.enter().append('path').classed('state', true)
  .attr('d', geoPath) // 直接使用绑定了投影的geoPath
  .attr('fill', (d,i) => colorScale(i))

完整修改后的代码片段 #

把这些整合到你的代码里，大概是这样：

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)
}
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().projection(projection)
// 适配地图到画布
projection.fitSize([width - 40, height - 40], topojson.feature(data, object))

// 添加zoom交互
const zoom = d3.zoom()
  .scaleExtent([1, 10])
  .on('zoom', (event) => {
    chartContainer.attr('transform', event.transform)
  })
svg.call(zoom)
// -------------------------------------------

// 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', (d,i) => colorScale(i))

额外检查 #

• Mapshaper导出的TopoJSON一般没问题，你可以在Mapshaper里预览确认数据是完整的尼日利亚地图；
• 确保topojson.feature(data, object)返回的是正确的GeoJSON对象，没有空数据。

这样修改后，地图加载时会自动缩放居中到SVG画布，同时你可以用鼠标拖拽平移、滚轮缩放，完全满足你的需求～

内容的提问来源于stack exchange，提问作者Jobie J