基于dc.js实现按年份范围筛选的职业分布饼图

嘿，我正好做过类似的dc.js饼图需求，给你梳理一下正确的实现方式，应该能解决你之前用fake group踩的坑！

核心思路其实很直接：利用crossfilter的维度范围过滤配合dc.js的饼图组件，不需要额外的fake group（除非你有更复杂的多维度需求，但这个场景下完全没必要）。下面是完整的实现步骤和代码示例：

1. 准备数据结构 #

假设你的数据源是类似这样的数组（每个条目代表一个从业者记录）：

const data = [
  { year: 1660, occupation: '农夫', count: 120 },
  { year: 1675, occupation: '工匠', count: 85 },
  { year: 1700, occupation: '商人', count: 60 },
  // ... 更多数据
];

2. 初始化Crossfilter和核心组件 #

// 初始化crossfilter
const cf = crossfilter(data);

// 创建年份维度（用于过滤）
const yearDimension = cf.dimension(d => d.year);

// 创建职业分组，聚合对应年份区间内的从业总人数
// 如果你的数据是每条记录代表1个人，用reduceCount()；如果有count字段，用reduceSum(d => d.count)
const occupationGroup = yearDimension.group().reduceSum(d => d.count);

// 初始化饼图
const pieChart = dc.pieChart('#pie-chart-container');

pieChart
  .dimension(yearDimension)
  .group(occupationGroup)
  .radius(150)
  .label(d => `${d.key}: ${d.value}人`) // 显示职业和人数
  .legend(dc.legend().x(250).y(0).itemHeight(15).gap(5)); // 图例配置

3. 处理年份区间输入 #

添加两个输入框让用户输入年份上下限，然后监听输入变化来更新过滤条件：

<div>
  <label>年份下限：<input type="number" id="year-min" placeholder="例如1650"></label>
  <label>年份上限：<input type="number" id="year-max" placeholder="例如1750"></label>
  <button id="apply-filter">应用过滤</button>
</div>
<div id="pie-chart-container"></div>

对应的JavaScript逻辑：

document.getElementById('apply-filter').addEventListener('click', () => {
  const minYear = parseInt(document.getElementById('year-min').value);
  const maxYear = parseInt(document.getElementById('year-max').value);
  
  // 验证输入有效性
  if (!isNaN(minYear) && !isNaN(maxYear) && minYear <= maxYear) {
    // 应用年份范围过滤
    yearDimension.filter([minYear, maxYear]);
    // 重绘饼图
    dc.redrawAll();
  } else {
    alert('请输入有效的年份区间（下限≤上限）');
  }
});

// 初始渲染图表
dc.renderAll();

关键细节说明 #

• 为什么不用fake group？在这个场景下，我们只需要对年份维度做范围过滤，crossfilter会自动把过滤后的结果传递给对应的组，饼图会直接展示过滤后的职业分布，完全不需要额外的fake group来包装。
• 如果你的数据是单条记录代表一个人，把reduceSum(d => d.count)换成reduceCount()即可。
• 记得处理输入验证，避免无效的数值或颠倒的区间导致图表异常。

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