D3.js中如何结合Brush与Zoom功能实现联动交互？

核心问题分析 #

当前问题根源是Brush 选区坐标未与 Zoom 缩放后的比例尺同步，导致缩放后刷选、刷选后缩放时，选区与实际条形图位置不匹配。需在 Brush 和 Zoom 的事件回调中，互相同步比例尺与选区范围。

步骤1：同步 Zoom 与 Brush 的坐标映射 #

修改 Zoom 事件回调，缩放完成后更新 Brush 范围，确保 Brush 坐标基于当前缩放后的比例尺：

function zoomed(event) {
  // 更新x轴比例尺
  xScale = event.transform.rescaleX(xScale0);
  xAxis.call(d3.axisBottom(xScale));
  
  // 更新条形图位置与宽度
  bars.attr("x", d => xScale(d.name))
      .attr("width", xScale.bandwidth());
  
  // 同步Brush范围：将当前选区从原始坐标转换为缩放后坐标
  const brushExtent = brush.extent();
  if (brushExtent && brushExtent[0] !== brushExtent[1]) {
    const newExtent = [
      xScale.invert(brushExtent[0]),
      xScale.invert(brushExtent[1])
    ];
    brush.extent(newExtent);
    brushGroup.call(brush);
  }
}

修改 Brush 事件回调，将选区转换为实际数据范围，再基于当前比例尺更新选中状态：

function brushed(event) {
  if (!event.sourceEvent) return; // 忽略Zoom触发的Brush更新
  const selection = event.selection;
  if (!selection) {
    // 无选区时恢复全选
    bars.classed("selected", true);
    return;
  }
  
  // 将Brush选区转换为数据域范围
  const [x0, x1] = selection.map(xScale.invert);
  // 匹配对应条形图数据
  const selectedData = data.filter(d => {
    const barX = xScale0(d.name);
    const barWidth = xScale0.bandwidth();
    return barX + barWidth >= x0 && barX <= x1;
  });
  
  // 更新选中状态
  bars.classed("selected", d => selectedData.includes(d));
}

步骤2：实现刷选自动吸附至条形图首尾 #

在 Brush 的 end 事件中，将选区调整为最近的条形图边界：

brush.on("end", function(event) {
  if (!event.selection) return;
  const [x0, x1] = event.selection;
  
  // 获取所有条形图的起始x坐标
  const barPositions = data.map(d => xScale(d.name));
  // 找到距离选区边界最近的条形图位置
  const leftBar = barPositions.find(pos => pos >= x0) || barPositions[0];
  const rightBar = barPositions.slice().reverse().find(pos => pos + xScale.bandwidth() <= x1) || barPositions[barPositions.length - 1];
  
  // 调整选区至条形图完整边界
  const newSelection = [leftBar, rightBar + xScale.bandwidth()];
  brush.move(d3.select(this), newSelection);
  
  // 触发选中逻辑
  brushed({ selection: newSelection, sourceEvent: event.sourceEvent });
});

步骤3：初始化状态与双向同步 #

确保初始全选状态，同时初始化 Brush 范围为全量数据：

// 初始化Brush范围为整个图表宽度
brush.extent([[0, 0], [width, height]]);
brushGroup.call(brush);

// 初始全选所有条形图
bars.classed("selected", true);

关键注意点 #

• 保留原始比例尺 xScale0 存储未缩放的初始定义域，避免缩放后丢失原始数据坐标
• 在事件回调中忽略对方触发的操作，防止循环执行
• 吸附逻辑需包含条形图宽度，确保选区刚好覆盖目标条形图的完整范围

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