DC.js条形图点击筛选失效：自定义Crossfilter维度问题

我的数据集包含整数类型的age变量，为实现年龄区间统计，我创建了返回区间字符串的Crossfilter维度，并用DC.js生成了条形图。图表可正常显示，但点击任意条形时，无法对其他关联图表进行筛选。我知道Crossfilter是直接过滤原始数据，而自定义的年龄区间并非原始数据集的字段，不知道该如何解决。

原维度与分组代码：

const ageRangeDim = ndx.dimension(function(d) {
  if (parseFloat(d.age) <= 7) 
    return "0-7";
  else if (parseFloat(d.age) <= 18) 
    return "8-18";
  else if (parseFloat(d.age) <= 25)
    return "19-25";
  else if (parseFloat(d.age) <= 40) 
    return "26-40";
  else if (parseFloat(d.age) <= 50)
    return "41-50";
  else if (parseFloat(d.age) <= 65) 
    return "51-65";
  else if (parseFloat(d.age) <= 80)
    return "66-80";
  else if (parseFloat(d.age) <= 90) 
    return "81-90";
  else if (parseFloat(d.age)  <= 100)
    return "91-100";
  return 0;
});

const ageRangeGroup = ageRangeDim.group().reduceCount()

原DC.js图表代码：

const ageGroupChart = (barChart("#App") as any)
  .x (scaleBand())
  .xUnits(units.ordinal)
  .xAxisLabel("Age groups")
  .yAxisLabel("Number of people")
  .dimension(ageRangeDim)
  .brushOn(false)
  .group(ageRangeGroup)

方法一：基于原始age维度+自定义分组（推荐） #

直接以原始age数值创建维度，分组时再将数值映射为区间字符串。这种方式符合Crossfilter的设计逻辑，无需额外自定义过滤逻辑，点击筛选会自动生效。

修改后代码：

// 基于原始age数值创建维度
const ageDim = ndx.dimension(d => parseFloat(d.age));

// 自定义分组逻辑，将age数值映射为区间字符串
const ageRangeGroup = ageDim.group(function(age) {
  if (age <= 7) return "0-7";
  else if (age <= 18) return "8-18";
  else if (age <= 25) return "19-25";
  else if (age <= 40) return "26-40";
  else if (age <= 50) return "41-50";
  else if (age <= 65) return "51-65";
  else if (age <= 80) return "66-80";
  else if (age <= 90) return "81-90";
  else if (age <= 100) return "91-100";
  return "其他"; // 替换原返回的0，更语义化
}).reduceCount();

// 图表关联原始age维度和区间分组
const ageGroupChart = (barChart("#App") as any)
  .x(scaleBand())
  .xUnits(units.ordinal)
  .xAxisLabel("Age groups")
  .yAxisLabel("Number of people")
  .dimension(ageDim)
  .brushOn(false)
  .group(ageRangeGroup);

方法二：自定义维度的过滤逻辑 #

如果需要保留原维度返回区间字符串的逻辑，可以覆盖维度的filter方法，将点击的区间字符串转换为对应的数值范围，实现对原始数据的过滤。

修改后代码：

// 定义区间与数值范围的映射表
const ageRangeMap = {
  "0-7": [0, 7],
  "8-18": [8, 18],
  "19-25": [19, 25],
  "26-40": [26, 40],
  "41-50": [41, 50],
  "51-65": [51, 65],
  "66-80": [66, 80],
  "81-90": [81, 90],
  "91-100": [91, 100]
};

// 原维度逻辑保留
const ageRangeDim = ndx.dimension(function(d) {
  const age = parseFloat(d.age);
  if (age <= 7) return "0-7";
  else if (age <= 18) return "8-18";
  else if (age <= 25) return "19-25";
  else if (age <= 40) return "26-40";
  else if (age <= 50) return "41-50";
  else if (age <= 65) return "51-65";
  else if (age <= 80) return "66-80";
  else if (age <= 90) return "81-90";
  else if (age <= 100) return "91-100";
  return "其他";
});

// 覆盖维度的filter方法，实现区间过滤
ageRangeDim.filter = function(rangeKey) {
  if (!rangeKey) {
    return this.filterAll(); // 清空过滤
  }
  const [min, max] = ageRangeMap[rangeKey];
  // 通过原始age维度执行范围过滤
  return ndx.dimension(d => parseFloat(d.age)).filterRange([min, max]);
};

// 图表代码保持不变
const ageRangeGroup = ageRangeDim.group().reduceCount();
const ageGroupChart = (barChart("#App") as any)
  .x(scaleBand())
  .xUnits(units.ordinal)
  .xAxisLabel("Age groups")
  .yAxisLabel("Number of people")
  .dimension(ageRangeDim)
  .brushOn(false)
  .group(ageRangeGroup);

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