如何在d3.js投影中使用.scale与.translate调整地图显示大小

• 投影配置无有效值：你当前d3.geoMercator().scale().translate([])写法没有传入合法参数，默认的缩放、偏移参数适配全球视图，针对湾区这类小范围地理数据就会出现地图极小的情况，缩放值调过大会直接偏移出可视区域导致地图消失。
• SVG重复创建：HTML里已经声明了id为my_dataviz的SVG容器，JS代码里又额外append了一个新的SVG，会导致布局错乱。

1. 优先使用自动适配方法（无需手动调参） #

D3 v4及以上版本支持fitSize方法，可以自动根据你的GeoJSON数据边界计算合适的缩放和偏移值，直接适配你设定的SVG尺寸，省掉手动调参的麻烦。

2. 完整修复后的JS代码 #

// 直接选中HTML里已有的SVG，不要重复创建
const canvas = d3.select("#my_dataviz")
    .attr("width", 900)
    .attr("height", 600)

d3.json("Bay_Area_Counties.geojson", function (data) {
    const group = canvas.selectAll("g")
        .data(data.features)
        .enter()
        .append("g")

    // 初始化投影，用fitSize自动适配
    const projection = d3.geoMercator()
        .fitSize([900, 600], data) // 第一个参数是SVG的宽高，第二个是你的GeoJSON数据
    const path = d3.geoPath(projection);

    const areas = group.append("path")
        .attr("d", path)
        .attr("class", "area")
        .attr("fill", "steelblue");
});

3. 手动调参的参考值 #

如果你需要手动调整缩放和偏移，针对湾区数据可参考如下配置：

const projection = d3.geoMercator()
    .scale(10500) // 数值越大地图越大，可根据展示效果微调
    .translate([450, 300]) // 数值对应SVG宽高的一半，让地图居中

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