Question

我在这里有一个演示 https://stackblitz.com/edit/stacked-area-basic?file=src/app/bar-chart.ts

我正在尝试创建堆积面积图。这是我第一次尝试这种图表，并且正在使用在线示例来提供帮助。

实际上什么也没有显示，正在创建路径，但是路径中的数据都是NaN。

我知道这是一个模糊的问题，但是任何人都可以看到为什么这不起作用。

const areaGenerator = d3.area()
  .x((d) => this.x(d.x))
  .y0(this.height)
  .y1((d) => this.y(d.y));

const areaGroup = this.chart.append('g')
  .classed('area-group', true)

areaGroup.selectAll('path')
  .data(data)
  .enter()
  .append('path')
  .style('fill', (d, i) => this.colors[i])
  .attr('d', areaGenerator)

Answer 1

您的区域生成器错误。应该是：

const areaGenerator = d3.area()
    .x((d) => this.x(d.data.date))
    .y0((d) => this.y(d[0]))
    .y1((d) => this.y(d[1]));

这是更新的代码：https://stackblitz.com/edit/stacked-area-basic-lz7kod?file=src/app/bar-chart.ts

使用NaN的堆积面积图数据

1 个答案: