D3结合D3-geo渲染GeoJSON时已生成的path路径不显示问题

• 基于D3、D3-geo实现.geojson格式地理要素渲染
• 调试阶段控制台无报错，Chrome元素检查可见<path>节点已生成，但页面无对应图形显示
• 异常效果参考：

代码存在三处核心错误，导致图形无法正常渲染：

1. projection.fitExtent()参数格式错误：该方法要求第一个入参为二维边界数组，格式为[[左上角x坐标, 左上角y坐标], [右下角x坐标, 右下角y坐标]]，原代码直接传入一维数组[width, height]，导致投影坐标计算完全偏移，所有路径点落在可视区域外
2. D3数据绑定逻辑混乱：原代码直接选中#content单个容器元素绑定features数组，还错误拆分enter、append、join调用链，不符合D3数据驱动DOM的规范流程，生成的path元素没有正确绑定地理数据
3. 缺少基础画布与样式配置：未初始化对应尺寸的SVG画布，也未给路径设置明确的填充、描边样式，存在图形透明不可见的隐患

// 获取页面可视区域宽高
const width = Math.max(
  document.documentElement.clientWidth,
  window.innerWidth || 0
);
const height = Math.max(
  document.documentElement.clientHeight,
  window.innerHeight || 0
);

// 初始化匹配可视区尺寸的SVG画布
const svg = d3.select('#content')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

d3.json("2022.json").then(function (data) {
  // 初始化墨卡托投影
  const projection = d3.geoMercator();
  // 修正fitExtent参数，四周预留20px边距避免图形贴边
  projection.fitExtent(
    [[20, 20], [width - 20, height - 20]],
    data
  );

  // 初始化地理路径生成器
  const geoGenerator = d3.geoPath().projection(projection);

  // 按规范完成数据绑定与路径生成
  svg.selectAll('path.geom')
    .data(data.features)
    .join('path')
    .attr('class', 'geom')
    .attr('d', geoGenerator)
    // 设置基础路径样式
    .attr('fill', '#f0f0f0')
    .attr('stroke', '#333')
    .attr('stroke-width', 1);
});

• 修正投影适配参数：传入符合API要求的二维边界数组，保证投影后的地理要素落在SVG画布可视范围内
• 补全SVG画布初始化：创建和页面可视区等大的SVG容器，作为地理路径的挂载节点
• 重构数据绑定逻辑：先选中SVG下所有待生成的路径元素，绑定geojson的features数组后直接用join()完成元素的增删匹配，去掉冗余错误的链式调用
• 增加基础路径样式：明确设置填充色、描边色和线宽，排除默认样式导致的不可见问题

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