D3.js v3转v4：如何为原始数据添加y0/y1替代.out()方法

我明白你在从D3.js v3迁移到v4时碰到的这个棘手问题——毕竟你的整个绘图逻辑都依赖原始数据里的price0（也就是堆叠基线y0）和price值，而v3里用来注入price0的out()方法在v4+里被移除了。下面给你两种解决方案，一种是完全适配你现有代码逻辑的（把y0值写回原始数据），另一种是更符合v4设计理念的优化方案：

方案一：将堆叠y0值写回原始数据（最小化代码修改） #

v3的stack.layout()会直接修改原始数据，而v4的d3.stack()返回一个全新的堆叠数据结构，我们可以把这个结构里的y0值映射回你原有的symbols数据，替代原来out()的作用：

// 1. 配置v4的stack布局，匹配原v3的reverse排序规则
const stack = d3.stack()
  .order(d3.stackOrderReverse) // 对应原v3的.order("reverse")
  .keys(d3.range(symbols.length)) // 用系列索引作为keys
  .value((d, key) => symbols[key].values[d.index].price); // 从原symbols中获取对应系列的价格

// 2. 构建点数组（包含每个点的日期和索引，用于对应原数据位置）
const points = symbols[0].values.map((d, i) => ({ date: d.date, index: i }));

// 3. 生成堆叠数据
const stackedData = stack(points);

// 4. 将堆叠的y0值写回原symbols的price0属性，实现原out()的效果
stackedData.forEach((seriesStack, seriesIndex) => {
  seriesStack.forEach((pointStack, pointIndex) => {
    const y0 = pointStack[0];
    symbols[seriesIndex].values[pointIndex].price0 = y0;
  });
});

完成这一步后，你后续的代码（y轴域计算、line/area生成器配置、过渡动画）可以完全复用原v3的逻辑，不需要做任何修改——因为原始数据里已经有了需要的price0值。

方案二：直接使用v4堆叠数据绘制（更符合v4+设计） #

如果你愿意调整绘图逻辑，v4的stack()返回的结构已经包含了每个点的[y0, y1]值，可以直接用它来绘制，不需要修改原始数据：

// 1. 转换数据结构为v4要求的“点优先”格式
// 原symbols是系列优先，转成每个点包含所有系列的价格
const points = symbols[0].values.map((d, i) => {
  const point = { date: d.date };
  symbols.forEach((series, idx) => {
    point[`series${idx}`] = series.values[i].price;
  });
  return point;
});

// 2. 配置stack布局
const stack = d3.stack()
  .order(d3.stackOrderReverse)
  .keys(symbols.map((_, idx) => `series${idx}`)); // 用转换后的系列key

// 3. 生成堆叠数据
const stackedData = stack(points);

// 4. 重新配置area和line生成器，直接使用堆叠数据
const area = d3.area()
  .x(d => x(d.data.date)) // 从d.data获取原始日期
  .y0(d => y(d[0])) // d[0]是堆叠基线y0
  .y1(d => y(d[1])); // d[1]是堆叠顶部y1（y0+price）

const line = d3.line()
  .x(d => x(d.data.date))
  .y(d => y(d[0])); // 线条用堆叠基线y0

// 5. 绘制时直接绑定stackedData
svg.selectAll(".symbol")
  .data(stackedData)
  .join(enter => {
    // 处理元素创建逻辑，对应原代码的初始绘制
    const g = enter.append("g").attr("class", "symbol");
    g.append("path").attr("class", "area");
    g.append("path").attr("class", "line");
    g.append("text");
    return g;
  })
  .transition()
  .duration(duration)
  .attr("transform", "translate(0,0)")
  .each("end", function() { d3.select(this).attr("transform", null); })
  .select("path.area")
  .attr("d", area);
// 后续的line和text绘制逻辑也对应调整，用stackedData的内容

这种方式不需要修改原始数据，更贴合D3 v4+的数据流理念，但需要你调整部分绘图绑定的逻辑。

注意事项 #

• 确保d3.stackOrderReverse正确引入，v4里排序器是d3.stackOrder*系列方法，而不是字符串参数；
• 转换数据结构时要保证所有系列的点数量一致（原代码里应该已经满足）。

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