如何使用dc.js将多列数据展示为独立柱状图并实现筛选？

云上老周

2026-5-21

嘿，我完全懂你的需求——用dc.js做一个展示冰淇淋口味受欢迎度的柱状图，还能通过点击柱子筛选出选择对应口味的人，而且你JavaScript基础一般，那我一步步给你拆解，每一步都写得明明白白，保证你能跟着做出来～

第一步：先把你的CSV数据理清楚

你给的原始CSV格式有点混乱，应该是表头为Name, Chocolate, Strawberry, Vanilla, Pistachio, Banana，后面跟着每个用户的选择（空值代表没选这个口味）。咱们先把它整理成标准CSV格式，方便后续处理：

Name,Chocolate,Strawberry,Vanilla,Pistachio,Banana
Alf,Chocolate,,Vanilla,,,
Bob,,Strawberry,Vanilla,,,,
Charlotte,Chocolate,,Vanilla,,Pistachio,Banana

如果你的原始数据是把所有行连在一起的也没关系，后面的JS代码可以帮你处理，但先理清楚结构会更省心。

第二步：准备HTML基础结构

首先，你需要引入dc.js依赖的三个库：d3.js、crossfilter.js和dc.js。建议把这些库的文件下载到本地，然后用script标签引入（避免外链依赖）。同时准备好图表容器和筛选结果展示区域：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入本地依赖库 -->
  <script src="d3.min.js"></script>
  <script src="crossfilter.min.js"></script>
  <script src="dc.min.js"></script>
  <!-- dc.js自带样式，让图表更美观 -->
  <link rel="stylesheet" href="dc.min.css">
</head>
<body>
  <!-- 柱状图容器 -->
  <div id="flavor-chart"></div>
  <!-- 筛选后用户列表区域 -->
  <div id="selected-users">
    <h3>选择该口味的用户：</h3>
    <ul id="user-list"></ul>
  </div>

  <script>
    // 后续JS代码写在这里
  </script>
</body>
</html>

第三步：处理CSV数据并转换格式

dc.js依赖crossfilter处理数据，而crossfilter更适合“每一行是一个独立数据条目”的结构。咱们需要把原来的“用户一行、多口味列”转换成“每个用户-口味组合一行”的格式——比如Alf选了巧克力和香草，就生成两个条目：{name: 'Alf', flavor: 'Chocolate'}和{name: 'Alf', flavor: 'Vanilla'}。

在script标签里添加这段数据处理代码：

// 直接写入整理好的CSV内容，也可以用d3.csv()读取本地文件
const csvData = `Name,Chocolate,Strawberry,Vanilla,Pistachio,Banana
Alf,Chocolate,,Vanilla,,,
Bob,,Strawberry,Vanilla,,,,
Charlotte,Chocolate,,Vanilla,,Pistachio,Banana`;

// 解析CSV数据，提取每个用户选择的口味
const parsedData = d3.csvParse(csvData, d => {
  return {
    name: d.Name,
    // 筛选出用户实际选择的口味
    flavors: Object.keys(d)
      .filter(key => key !== 'Name' && d[key] !== '')
      .map(key => key)
  };
});

// 把用户的口味列表展开成单个数据条目
const flattenedData = [];
parsedData.forEach(user => {
  user.flavors.forEach(flavor => {
    flattenedData.push({
      name: user.name,
      flavor: flavor
    });
  });
});

第四步：用crossfilter设置数据维度和组

现在我们有了适合crossfilter的数据，接下来创建维度和组，用来统计口味人数、关联用户：

// 创建crossfilter实例
const cf = crossfilter(flattenedData);

// 1. 按口味分组的维度，用于绘制柱状图
const flavorDim = cf.dimension(d => d.flavor);
// 统计每个口味的用户数量（用distinct避免同一用户重复计数）
const flavorGroup = flavorDim.group().reduceCount();

// 2. 按用户名分组的维度，用于筛选用户
const userDim = cf.dimension(d => d.name);

第五步：用dc.js绘制柱状图并添加交互

现在可以创建柱状图，同时添加点击交互——点击柱子时自动筛选并显示对应口味的用户：

// 创建柱状图实例
const flavorChart = dc.barChart('#flavor-chart')
  .width(600)
  .height(400)
  .dimension(flavorDim)
  .group(flavorGroup)
  .x(d3.scaleBand()) // 口味是分类数据，用带刻度的比例尺
  .xUnits(dc.units.ordinal) // 告诉dc.js这是分类轴
  .xAxisLabel('冰淇淋口味')
  .yAxisLabel('选择人数')
  .renderLabel(true) // 在柱子上显示数值
  .transitionDuration(500); // 动画过渡时间

// 渲染图表
flavorChart.render();

// 添加点击交互逻辑
flavorChart.on('filtered', function(chart) {
  // 获取当前筛选的口味
  const selectedFlavors = flavorDim.top(Infinity).map(d => d.flavor);
  // 筛选出对应用户（去重处理）
  const filteredUsers = selectedFlavors.length > 0 
    ? userDim.top(Infinity).map(d => d.name).filter((v, i, a) => a.indexOf(v) === i)
    : parsedData.map(d => d.name);
  
  // 更新页面上的用户列表
  const userList = document.getElementById('user-list');
  userList.innerHTML = filteredUsers.map(name => `<li>${name}</li>`).join('');
});

最后：测试和调整

把所有代码整合到一起，打开HTML文件就能看到效果：

柱状图会显示每个口味的选择人数
点击任意柱子，下方列表会自动显示所有选择该口味的用户
点击图表空白处，会重置筛选，显示所有用户

如果你的CSV是本地文件，把const csvData = ...换成d3.csv('your-file.csv').then(data => { /* 这里写解析和处理代码 */ })即可，注意异步逻辑的处理。

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