Vue3切换D3.zoom与D3.brush后，容器缩放引发平移异常的修复咨询

一、Bug 修复方案 #

1. 容器 resize 时同步更新 Zoom/Brush 范围 #

容器尺寸变化后，原有的 brush.extent 和 zoom 坐标基准未同步更新，导致平移计算错位。在监听宽高变化的回调中，必须重新设置两者的范围并调整现有变换：

// 监听容器宽高变化
watch([width, height], ([newW, newH]) => {
  // 更新 brush 选区范围
  brush = d3.brush().extent([[0, 0], [newW, newH]])
    .on('brush', handleBrush)
    .on('end', handleBrushEnd);
  
  // 更新 zoom 缩放限制与平移范围
  zoom = d3.zoom().scaleExtent([0.5, 5])
    .translateExtent([[0, 0], [newW, newH]])
    .on('zoom', handleZoom);
  
  // 重新绑定到 SVG 元素
  const svgEl = d3.select(svgRef.value);
  svgEl.call(brush).call(zoom);
  
  // 适配现有变换到新尺寸
  const oldTransform = d3.zoomTransform(svgEl.node());
  const xAdjust = newW / oldW.value;
  const yAdjust = newH / oldH.value;
  const newTransform = d3.zoomIdentity
    .translate(oldTransform.x * xAdjust, oldTransform.y * yAdjust)
    .scale(oldTransform.k);
  svgEl.call(zoom.transform, newTransform);
  
  // 重绘图形与选区
  redrawScatterplot();
  updateBrushSelection();
}, { immediate: true });

2. 彻底隔离 Pan/Brush 模式的事件绑定 #

切换模式时，必须完全移除另一模式的事件监听，避免交互冲突：

const { currentMode } = useScatterplotStore();

watch(currentMode, (mode) => {
  const svgEl = d3.select(svgRef.value);
  if (mode === 'pan') {
    // 清除 brush 事件与残留选区
    svgEl.call(brush.clear).on('.brush', null);
    // 恢复 zoom 的完整交互（平移+缩放）
    zoom.filter(null);
    svgEl.call(zoom);
  } else if (mode === 'brush') {
    // 仅允许 zoom 响应滚轮缩放，禁用拖拽平移
    zoom.filter((event) => event.type === 'wheel');
    svgEl.call(zoom);
    // 重新绑定 brush 事件
    svgEl.call(brush);
  }
});

3. 修复悬停自动平移问题 #

此问题源于 brush 模式下 zoom 的拖拽事件未被完全禁用。通过 zoom.filter 过滤事件类型，确保只有滚轮操作触发 zoom：

// 切换到 brush 模式时的 zoom 配置
zoom = d3.zoom().scaleExtent([0.5, 5])
  .filter((event) => event.type === 'wheel') // 仅响应滚轮缩放
  .on('zoom', handleZoom);

二、代码解耦方法 #

1. 封装 D3 逻辑为 Vue Composable #

将散点图的初始化、交互、渲染逻辑抽成独立的组合式函数，与业务组件解耦：

// composables/useD3Scatterplot.js
export function useD3Scatterplot(svgRef, data, width, height) {
  let brush;
  let zoom;
  let svg;

  // 初始化交互与图形
  const init = () => {
    svg = d3.select(svgRef.value);
    zoom = d3.zoom().scaleExtent([0.5, 5]).on('zoom', handleZoom);
    brush = d3.brush().extent([[0, 0], [width.value, height.value]]).on('brush', handleBrush);
    svg.call(zoom);
    drawInitialScatterplot();
  };

  // 处理 zoom 变换
  const handleZoom = (event) => {
    svg.select('.scatter-group').attr('transform', event.transform);
  };

  // 处理 brush 选区
  const handleBrush = (event) => {
    const selection = event.selection;
    // 执行节点选中逻辑
  };

  // 处理容器 resize
  const handleResize = () => {
    // 复用前面的 resize 更新逻辑
  };

  return { init, handleResize };
}

2. Pinia 仅存状态，不存函数 #

Pinia 只维护模式状态（currentMode: 'pan' | 'brush'），切换逻辑由组件或 composable 监听状态变化执行：

// stores/scatterplot.js
export const useScatterplotStore = defineStore('scatterplot', {
  state: () => ({
    currentMode: 'pan'
  }),
  actions: {
    switchMode(mode) {
      this.currentMode = mode;
    }
  }
});

3. 分离交互与渲染逻辑 #

将图形渲染抽成独立函数，仅依赖当前的缩放、平移、选中状态，不与交互逻辑耦合：

const redraw = (transform, selectedIds) => {
  const circles = svg.select('.scatter-group')
    .selectAll('circle')
    .data(data.value);
  
  circles.enter()
    .append('circle')
    .merge(circles)
    .attr('cx', d => xScale(d.x))
    .attr('cy', d => yScale(d.y))
    .attr('transform', transform)
    .classed('selected', d => selectedIds.includes(d.id));
};

4. 用 D3 Dispatch 解耦事件 #

通过 d3.dispatch 发送交互事件，Vue 组件监听事件更新状态，避免 D3 直接操作 Vue 数据：

// 在 composable 中创建事件调度器
const dispatch = d3.dispatch('brushSelected', 'zoomChanged');

// brush 结束时触发选中事件
const handleBrushEnd = (event) => {
  const selectedIds = getSelectedNodes(event.selection);
  dispatch.call('brushSelected', null, selectedIds);
};

// 组件中监听事件
const { init, dispatch } = useD3Scatterplot(...);
dispatch.on('brushSelected', (selectedIds) => {
  // 更新组件或 Pinia 状态
});

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