如何在无固定宽高的SVG中居中D3绘制的美国geoPath地图

可以实现，核心是通过D3提供的geoPath.fitSize()方法自动适配地理要素到你的SVG视口并居中，修改后的代码如下：

var svg = d3.select("div#main").append("svg")
    .attr("preserveAspectRatio", "xMidYMid meet")
    .attr("viewBox", "0 0 1250 800")

d3.json("https://cdn.jsdelivr.net/npm/us-atlas@3/counties-albers-10m.json").then(
    function(us) {
        const nationGeo = topojson.feature(us, us.objects.nation)
        // 生成适配viewBox尺寸、自动居中的路径生成器
        const path = d3.geoPath()
            .fitSize([1250, 800], nationGeo)

        svg.append("path")
            .datum(nationGeo)
            .attr("fill", "#f6f6f4")
            .attr("class", "nation")
            .attr("d", path)
    }
)

原理解释 #

• 你使用的counties-albers-10m.json属于预投影的美国地图数据，本身已经使用Albers投影转换为平面坐标，不需要额外配置投影规则。
• fitSize方法会自动计算传入地理要素的边界范围，将其缩放到你指定的宽高（和你的viewBox参数一致）范围内，同时自动完成居中对齐，不会破坏SVG的自适应缩放特性，外层容器尺寸变化时地图依然会保持居中。
• 后续如果需要叠加州界、郡县边界，共用同一个path生成器绘制即可，所有元素都会自动对齐。

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