使用GeoJSON地图数据时d3.zoom缩放异常的原因及修复方案

问题原因 #

• 变换层级错误：直接对<svg>元素应用transform属性，导致D3的zoom变换坐标系与地图投影的适配区域（通过fitSize适配wrapper宽高）不匹配，缩放中心偏离鼠标位置，出现从右下角缩放的异常。
• 缺乏容器隔离：地图路径直接挂载在SVG根节点下，没有用<g>元素作为统一容器，zoom变换无法正确作用于地图内容的整体坐标系。
• 投影精度设置过高：precision(100)会大幅降低地图路径的精度，虽不是缩放问题，但会导致地图渲染失真，建议调整或移除。

修复步骤 #

1. 调整DOM结构，添加地图容器 #

在SVG内部新增一个<g>元素作为地图路径的容器，通过ref引用：

<div ref={wrapperRef}>
  <svg ref={svgRef}>
    {/* 新增g元素承载所有地图路径 */}
    <g ref={mapGroupRef}></g>
  </svg>
</div>

2. 修改地图渲染逻辑，路径挂载到容器 #

将原本渲染到SVG的路径，改为渲染到新增的<g>容器中，并调整投影精度：

useEffect(() => {
  const svg = select(svgRef.current);
  const mapGroup = select(mapGroupRef.current);

  const { width, height } = wrapperRef.current.getBoundingClientRect();

  // 调整precision为合理值，或直接移除（默认0.1）
  const projection = geoMercator()
    .fitSize([width, height], data)
    .precision(1);

  const pathGenerator = geoPath().projection(projection);
  initZoom();

  // 渲染路径到mapGroup容器
  mapGroup
    .selectAll(".country")
    .data(data.features)
    .join("path")
    .attr("class", "country")
    .transition()
    .attr("fill", 'lightgrey')
    .attr("d", feature => pathGenerator(feature));

}, [data]);

3. 修正缩放逻辑，变换作用于容器 #

将zoom变换的目标改为<g>容器，同时保持zoom事件绑定在SVG上（确保监听整个区域的鼠标操作）：

// 用useMemo缓存zoom实例，避免组件重复渲染时重新创建
const zoom = useMemo(() => {
  return d3.zoom()
    .on('zoom', handleZoom);
}, []);

function handleZoom(e) {
  // 对mapGroup应用变换，而非SVG本身
  select(mapGroupRef.current)
    .attr('transform', e.transform);
}

function initZoom() {
  // zoom事件绑定在SVG上，监听鼠标操作
  select(svgRef.current)
    .call(zoom);
}

4. 可选：确保SVG与wrapper尺寸一致 #

为避免坐标系进一步偏移，可将SVG的宽高设置为wrapper的实际尺寸：

// 用useState保存wrapper的宽高，结合resize监听更新
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

useEffect(() => {
  const updateDimensions = () => {
    const { width, height } = wrapperRef.current.getBoundingClientRect();
    setDimensions({ width, height });
  };
  updateDimensions();
  window.addEventListener('resize', updateDimensions);
  return () => window.removeEventListener('resize', updateDimensions);
}, []);

// 在SVG上设置宽高
<svg ref={svgRef} width={dimensions.width} height={dimensions.height}>
  <g ref={mapGroupRef}></g>
</svg>

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