使用D3.js geo-projection绘单国地图却显示全球范围求助

算力阿峰

2026-7-3

解决D3.js单国地图显示全地球范围的问题

原因排查与修复方案

移除GeoJSON中的全局bbox属性
部分GeoJSON导出工具会自动添加"bbox": [-180, -90, 180, 90]这类覆盖整个地球的边界字段，D3的fitSize方法会优先读取该bbox计算投影范围，而非实际国家几何的边界。打开你的GeoJSON文件，找到并删除这个字段即可。
确保传入fitSize的是Feature/FeatureCollection对象
如果你的data直接是MultiPolygon类型的几何数据（而非Feature或FeatureCollection结构），D3的边界计算可能出现异常。将几何数据包装成Feature对象后再传入：
```
const feature = { type: "Feature", geometry: data };
const projection = d3.geoEquirectangular().fitSize([width, height], feature);
const path = d3.geoPath().projection(projection);
```

手动计算边界并使用fitBounds
若上述方法无效，手动计算目标几何的实际边界，再用fitBounds设置投影范围：

// 若data是几何对象，先转为Feature
const targetFeature = { type: "Feature", geometry: data };
const bounds = d3.geoBounds(targetFeature);
const projection = d3.geoEquirectangular().fitBounds([[0, 0], [width, height]], bounds);
const path = d3.geoPath().projection(projection);