D3堆叠图stack()方法本地运行返回结果异常问题咨询

问题背景 #

• 复现对象：Mike Bostock发布的2003-2020年主流操作系统占比堆叠图示例
• 异常表现：示例代码在Observable平台运行正常，迁移到原生HTML/JS环境后，负责生成堆叠数据的_series函数返回的嵌套数组仅包含单条输入数据，无法输出按日期维度存储各分类对应数值的标准嵌套结构，导致图表渲染失败。

核心异常代码 #

function _series(d3,data){return(
d3.stack()
    .keys(d3.group(data, d => d.Article).keys())
    .value(([, values], name) => values.get(name) || 0)
  (d3.rollup(data, ([d]) => d.stock, d => +d.date, d => d.Article))
)}

代码语法逻辑解释 #

代码中.value()方法后直接接括号传入d3.rollup()结果的写法，不是给value方法传两组参数，是JavaScript链式调用+函数立即执行的常规写法：

• d3.stack()调用后会返回一个可执行的堆叠生成器函数
• 后续连续调用的.keys()、.value()都是堆叠生成器的配置方法，每个配置方法执行完成后都会返回生成器本身，支持链式写法
• 链式调用末尾的括号，是把配置完成的堆叠生成器直接执行，括号内的d3.rollup()返回值就是传入生成器的输入数据集。

上述代码和下面拆分后的写法逻辑完全等价：

function _series(d3,data){
  // 初始化堆叠生成器
  const stack = d3.stack()
    // 配置堆叠维度的分类键
    .keys(d3.group(data, d => d.Article).keys())
    // 配置每个分类对应数值的取值规则
    .value(([, values], name) => values.get(name) || 0)
  // 对原始数据做分组聚合：按日期、文章分类两级分组，取对应stock值
  const groupedData = d3.rollup(data, ([d]) => d.stock, d => +d.date, d => d.Article)
  // 传入聚合后的数据执行堆叠计算，返回结果
  return stack(groupedData)
}

异常原因与修复方案 #

该异常和Observable平台的底层隐式处理无关，核心原因是本地运行环境的D3版本与原示例依赖版本不匹配：

• 原Observable示例使用D3 v7版本，该版本中d3.group、d3.rollup返回的都是ES6 Map结构，原生支持.keys()获取键迭代器、.get(key)按键取值的方法
• 如果本地引入的是D3 v6及更早版本，d3.rollup返回的是普通对象而非Map结构，会导致后续.get()取值失败，最终输出的堆叠数组结构异常。

修复操作如下：

1. 确认本地引入的D3版本为v7及以上稳定版，版本不匹配是该类迁移问题的最高发诱因。
2. 核对本地传入的原始数据字段：当前代码用d.Article作为分类键、d.stock作为堆叠数值、+d.date转为时间戳作为X轴维度，需确保原始数据中三个字段存在且格式符合预期，不要直接硬套原示例的字段名。
3. 调试阶段可单独打印d3.rollup的返回结果，确认其为两层嵌套的Map结构：第一层键为转成数字的日期戳，对应值为第二层Map；第二层键为Article分类名，对应值为对应的stock数值，结构符合要求后堆叠生成器即可正常输出结果。

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