本文详解 d3.rollup() 的核心参数逻辑与常见误用，重点纠正日期解析错误、聚合函数写法不当及键提取类型不匹配等问题，帮助开发者快速获得结构清晰的嵌套映射结果。
本文详解 `d3.rollup()` 的核心参数逻辑与常见误用，重点纠正日期解析错误、聚合函数写法不当及键提取类型不匹配等问题，帮助开发者快速获得结构清晰的嵌套映射结果。
d3.rollup() 是 D3 v6+ 中用于多级分组聚合的关键函数，其签名如下：
d3.rollup(iterable, reduce, ...keys)
其中：
- iterable：待处理的数据数组；
- reduce：对每个分组执行的聚合函数，接收整个分组数组（而非单个元素）作为参数；
- ...keys：一个或多个键提取函数，按顺序构成嵌套层级（如先按日期分组，再按名称分组）。
在原始代码中，问题集中于三处关键误用：
❌ 错误 1：键提取函数将日期转为数字
d => +d.date // ❌ "2000-01-01" → NaN → 所有数据被归入 undefined 键
+ 运算符无法解析标准 ISO 日期字符串，导致所有记录的主键变为 NaN，最终 d3.rollup 创建一个键为 NaN 的条目；而 Array.from() 在遍历时对 NaN 调用 new Date(NaN) 得到 Invalid Date，进而被序列化为 null —— 这正是 [[null, {}]] 的根源。
✅ 正确做法是直接使用字符串日期作为键（保持语义清晰），或统一转换为 Date 对象后再取时间戳（若需数值比较）：
d => d.date // ✅ 字符串键，安全可靠 // 或 d => new Date(d.date).getTime() // ✅ 时间戳数值键（需确保日期格式有效）
❌ 错误 2：聚合函数误将分组当作单元素解构
([d]) => d.value // ❌ 假设 group 是单元素数组，实际是完整分组（可能含多条同键记录）
当多条数据具有相同 date 和 name 时（本例中无重复，但逻辑必须健壮），该写法会报错或取值错误。且此处目标是求和，而非取首项。
✅ 应使用 d3.sum(group, accessor) 显式聚合：
group => d3.sum(group, d => d.value) // ✅ 安全、可扩展、语义明确
❌ 错误 3：变量未声明、作用域混乱
原始代码中 datevalues 为隐式全局变量，且函数体外无调用，无法验证输出。
✅ 补全 const 声明、return 语句，并确保模块正确导入：
import * as d3 from 'd3';
const data = [
{ "date": "2000-01-01", "name": "Coca-Cola", "category": "Beverages", "value": 72537 },
{ "date": "2000-01-01", "name": "Microsoft", "category": "Technology", "value": 70196 },
{ "date": "2000-01-01", "name": "IBM", "category": "Business Services", "value": 53183 }
];
function populateDateValues() {
const dateValues = Array.from(
d3.rollup(
data,
group => d3.sum(group, d => d.value), // 聚合：按 date + name 分组后求 value 总和
d => d.date, // 第一级键：日期字符串
d => d.name // 第二级键：公司名称
)
).map(([dateStr, nameMap]) => [new Date(dateStr), nameMap])
.sort(([a], [b]) => d3.ascending(a, b));
return dateValues;
}
// ✅ 调用并查看结果
console.log(populateDateValues());
// 输出：
// [
// [
// 2000-01-01T00:00:00.000Z,
// InternMap(3) {
// 'Coca-Cola' => 72537,
// 'Microsoft' => 70196,
// 'IBM' => 53183
// }
// ]
// ]? 关键总结与最佳实践
- 键函数务必返回有效、一致的值：避免 +d.date 等易出错转换，优先使用原始字符串或显式 new Date().toISOString()；
- 聚合函数必须处理数组：d3.rollup 的 reduce 参数接收的是分组后的数组，不是单个对象；
- 善用 InternMap：d3.rollup 返回 Map 的子类，支持 .get(key)、.size 等方法，比普通对象更健壮；
- 排序前确保键有效：new Date(dateStr) 在 dateStr 无效时返回 Invalid Date，建议添加校验或使用 d3.timeParse 解析；
- 调试技巧：先打印 d3.rollup(...) 原始结果，再逐步链式处理，避免一长串调用掩盖中间错误。
遵循以上原则，即可稳定、高效地利用 d3.rollup() 构建多维聚合数据结构，为后续可视化奠定坚实基础。
