使用crossfilter.js时，刷选直方图后为何无法过滤其他视图？

我最近在做一个可视化项目，核心需求是实现直方图刷选联动过滤其他视图的功能，用D3.js负责可视化渲染，Crossfilter.js来处理数据的多维过滤关联。下面是我的核心代码片段和关键实现思路：

// 初始化自定义散点图组件
var chart = scatterPlot()
  .width(350)
  .height(350)
  .x(function (d) { return d.key[0] })
  .y(function (d) { return d.key[1] });

// 加载CSV数据并初始化Crossfilter数据容器
d3.csv("data.csv", function (data) {
  // 数据格式说明：每条数据包含x,y,z,x1,y1字段
  var csData = crossfilter(data);

  // 1. 配置散点图的Crossfilter维度与分组
  csData.dimScatter = csData.dimension(function (d) { 
    // 散点图基于x1、y1字段生成二维坐标维度
    return [parseFloat(d.x1), parseFloat(d.y1)]; 
  });
  csData.byScatter = csData.dimScatter.group();

  // 2. 配置直方图的Crossfilter维度与分组（用于刷选过滤）
  csData.dimHisto = csData.dimension(function(d) {
    // 这里以x字段作为直方图的统计维度，可根据需求替换为y/z等字段
    return parseFloat(d.x);
  });
  csData.byHisto = csData.dimHisto.group();

  // --- 刷选联动核心逻辑 ---
  // 创建D3水平刷选组件并绑定到直方图容器
  const brush = d3.brushX()
    .extent([[0, 0], [histoWidth, histoHeight]])
    .on("end", brushed);

  function brushed(event) {
    const selection = event.selection;
    if (selection) {
      // 将刷选的像素范围转换为对应的数据域范围
      const [min, max] = selection.map(xScale.invert);
      // 调用Crossfilter过滤方法，同步更新所有关联视图的数据
      csData.dimHisto.filter([min, max]);
    } else {
      // 清除刷选时恢复所有数据
      csData.dimHisto.filterAll();
    }
    // 更新散点图：传入过滤后的最新数据并重新渲染
    chart(csData.byScatter.top(Infinity));
  }
});

关键实现要点： #

• Crossfilter的核心价值：它能高效维护多维数据的关联关系，当通过直方图维度过滤数据时，散点图的维度会自动同步过滤结果，无需手动处理数据交集逻辑。
• 刷选事件处理：通过D3的brushX（垂直刷选用brushY）创建刷选区域，在刷选结束后将像素坐标转换为数据域范围，再调用Crossfilter的filter方法完成数据过滤。
• 视图联动更新：每次过滤操作完成后，需要调用散点图的渲染函数，传入Crossfilter分组后的最新数据（top(Infinity)用于获取所有符合条件的数据），实现视图的实时联动。

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