使用Brush工具时ScaleBand轴柱状图出现条形堆叠问题

我明白你遇到的问题了——当用Brush对基于scaleBand()的离散x轴柱状图进行缩放平移时，未被选中的条形会跑到左上角重叠在一起。这其实是D3的一个默认行为：当你尝试用scaleBand()去映射一个不在其定义域内的数值时，它会返回undefined，而D3在处理元素位置时，会把undefined解析成0，导致这些条形都堆在x=0的位置。

下面给你两种可行的解决方案，结合你的代码场景来调整：

方案1：隐藏或移出可视区域外的条形 #

这种方法不需要修改数据，只是通过样式或位置调整来隐藏未被Brush选中的条形，适合需要保留DOM元素的场景：

function brushed(event) {
  const selection = event.selection;
  if (!selection) {
    // 取消Brush时恢复所有条形的可见性和位置
    svg.selectAll(".bar")
      .attr("opacity", 1)
      .attr("x", d => xScale(d.letter));
    return;
  }

  // 将Brush的像素范围转换为对应的x轴位置范围
  const [xStart, xEnd] = selection.map(xScale.invertX);
  
  // 更新每个条形的状态
  svg.selectAll(".bar")
    .data(data)
    .attr("opacity", d => {
      const barX = xScale(d.letter);
      // 判断条形是否完全在Brush范围内
      return barX >= xStart && barX + xScale.bandwidth() <= xEnd ? 1 : 0;
    })
    // 也可以把不在范围内的条形移到可视区域左侧外面，避免占据空间
    .attr("x", d => {
      const barX = xScale(d.letter);
      return barX >= xStart && barX + xScale.bandwidth() <= xEnd ? barX : -xScale.bandwidth();
    });
}

方案2：过滤数据后重新渲染条形 #

这种方法会直接移除不在Brush范围内的条形，只保留符合条件的元素，性能更优，适合数据量较大的场景：

// 抽离更新逻辑成单独函数，方便复用
function updateChart(filteredData) {
  const bars = svg.selectAll(".bar")
    .data(filteredData);

  // 移除不再需要的条形
  bars.exit().remove();

  // 添加新的条形并更新现有条形的位置
  bars.enter()
    .append("rect")
    .attr("class", "bar")
    .merge(bars)
    .attr("x", d => xScale(d.letter))
    .attr("width", xScale.bandwidth())
    .attr("y", d => yScale(d.value))
    .attr("height", d => height - yScale(d.value));
}

function brushed(event) {
  const selection = event.selection;
  if (!selection) {
    // 取消Brush时显示全部数据
    updateChart(data);
    return;
  }

  const [xStart, xEnd] = selection.map(xScale.invertX);
  // 筛选出在Brush范围内的数据
  const filteredData = data.filter(d => {
    const barX = xScale(d.letter);
    return barX >= xStart && barX + xScale.bandwidth() <= xEnd;
  });

  updateChart(filteredData);
}

关键注意点 #

因为scaleBand()是离散比例尺，它的定义域是一个个独立的类别（比如你的字母），所以不能直接用Brush的连续像素范围去和数据的类别值比较，必须先通过xScale()把类别转换成对应的像素位置，再判断这个位置是否落在Brush的范围内。

这样调整后，你就不会再看到左上角重叠的条形了。

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