D3 v6水平堆叠条形图适配：y0字段来源与TypeScript类型报错解决

stack生成器y0属性生成逻辑说明 #

• D3 stack生成器的原生输出不会直接为原始数据注入y0/y1这类自定义字段，固定输出结构为：每个堆叠层是一组对象，组内每个元素是长度为2的数值数组，分别代表当前堆叠段的起始基线值、结束基线值，绑定的原始数据统一挂在每个元素的data属性下，和二元数值对做结构隔离。
• 观察到的y0初始值为0的现象，来源于单系列堆叠场景的天然规则：因为没有前置系列做数值累加，第一个堆叠段的起始基线值天生为0，也就是二元数组的第一个元素值。参考示例在拿到stack输出后做映射时，手动把这个起始值赋值给了数据的y0属性，并非生成器自动注入的字段。

TypeScript类型报错解决 #

报错Property 'y0' does not exist on type '{ y: number; x: string; }'的核心原因：手动给数据附加的y0/x0这类映射字段，没有提前纳入类型声明范围，TS校验时无法在原始的{x: string; y: number}类型结构里找到对应属性。

• 分层定义类型，避免原始数据类型和堆叠映射后的类型混用：
  • 原始输入数据类型：type RawDatum = { x: string; y: number }，对应现有月份字符串、指标数值字段
  • 堆叠映射后的扩展类型：type StackedDatum = RawDatum & { x0: number; x1: number }，其中x0对应水平堆叠下的条带起始坐标，x1对应条带结束坐标，提前声明所有手动附加的字段。
• 轴翻转映射时，从stack输出的二元数组中显式取起始/结束值赋值给对应字段，TS即可正常识别：

// 逐点映射stack输出的单系列数据
const mappedStackData = stackedSeries[0].map((point) => {
  const startBase = point[0] // 对应原垂直场景的y0，单系列下固定为0
  const endBase = point[1]
  return {
    ...point.data, // 透传原始的x、y字段
    x0: startBase,
    x1: endBase,
    y: point.data.x // 原分类月份字段映射为y轴分类值，实现轴翻转
  }
})

D3 v6 适配核心要点 #

• 替换旧版本的隐式数据读取写法：v6中stack元素的原始数据统一通过point.data获取，避免字段读取错位
• 调整轴比例尺配置：x轴改为数值连续比例尺，定义域覆盖0到x1的最大累加值；y轴改为分类比例尺，定义域为所有月份字符串，和原x轴的取值域保持一致
• 条带渲染属性绑定规则：矩形的x坐标绑定x0、width值绑定x1 - x0、y坐标绑定当前月份对应的分类比例尺位置、height绑定分类比例尺的带宽，即可生成水平堆叠条形效果。

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