Angular中D3分组柱状图+折线图实现报错：无法读取x0属性

问题核心 #

你遇到的ERROR TypeError: Cannot read properties of undefined (reading 'x0')，以及x2比例尺无法读取的问题，本质是比例尺的作用域错误或初始化顺序问题——绘制折线图时，x0/x2比例尺要么未完成初始化，要么因作用域限制无法被访问。

具体修复步骤 #

1. 修正比例尺的作用域 #

把x0、x2比例尺定义为组件类的成员变量，而非局部函数内的临时变量，确保折线图绘制逻辑能正常访问到：

import * as d3 from 'd3';

export class ChartComponent implements OnInit {
  // 把比例尺声明为类成员变量
  private x0: d3.ScaleBand<string>;
  private x2: d3.ScaleBand<string>;
  private y: d3.ScaleLinear<number, number>;
  // 其他必要变量...

  ngOnInit() {
    this.renderChart();
  }

  private renderChart() {
    // 初始化x0比例尺
    this.x0 = d3.scaleBand()
      .domain(this.data.map(d => d.group))
      .range([0, this.width])
      .padding(0.2);

    // 初始化x2比例尺
    this.x2 = d3.scaleBand()
      .domain(this.subgroups)
      .range([0, this.x0.bandwidth()])
      .padding(0.05);

    // 初始化y比例尺
    this.y = d3.scaleLinear()
      .domain([0, d3.max(this.data, d => d3.max(this.subgroups, key => d[key]))])
      .range([this.height, 0]);

    // 先绘制柱状图，再绘制折线图
    this.drawBars();
    this.drawLine();
  }
}

2. 调整折线图的绘制顺序 #

必须在x0、x2比例尺完全初始化后，再调用折线图绘制函数。把折线绘制逻辑放在柱状图绘制之后，确保所有依赖的比例尺都已就绪。

3. 修复折线图的坐标映射逻辑 #

折线图的x坐标需要结合x0（分组刻度）和x2（子分组刻度）计算，确保坐标计算时能正确访问到已初始化的比例尺：

private drawLine() {
  const lineGenerator = d3.line()
    // 计算每个数据点的x坐标：分组起始位置 + 子分组偏移 + 子分组宽度的一半
    .x(d => this.x0(d.group) + this.x2('your-line-subgroup') + this.x2.bandwidth() / 2)
    .y(d => this.y(d['your-line-subgroup']));

  // 绘制折线
  this.svg.append('path')
    .datum(this.data)
    .attr('fill', 'none')
    .attr('stroke', 'red')
    .attr('stroke-width', 2)
    .attr('d', lineGenerator);
}

注意替换your-line-subgroup为你折线图对应的数据字段名。

4. 验证数据完整性 #

确保折线图使用的数据结构与柱状图一致，每个数据项都包含group字段和对应的折线值字段，避免因数据缺失导致比例尺的domain初始化失败。

报错原因说明 #

当代码尝试读取x0时，若该变量是局部变量（比如在绘制柱状图的函数内定义），函数执行完毕后变量会被销毁；或者折线图绘制逻辑提前执行，此时x0还未完成初始化，都会导致undefined的报错。将比例尺提升为类成员变量，并调整绘制顺序，就能从根源解决这个问题。

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