任何人都可以建议一个好的图表实施教程（堆叠的条形图）

Question

我尝试实现d3堆积条形图。请在下面找到代码：

`private createChart（）：void {         d3.select（'svg'）。remove（）;

    const element = this.chartContainer.nativeElement;
    const data = this.data;

    const svg = d3.select(element).append('svg')
        .attr('width', element.offsetWidth)
        .attr('height', element.offsetHeight);

    const contentWidth = element.offsetWidth - this.margin.left - this.margin.right;
    const contentHeight = element.offsetHeight - this.margin.top - this.margin.bottom;  

    const x = 
      d3Scale.scaleBand()
      .rangeRound([0, contentWidth])
      .padding(0.1)
      .domain(data.map(d => d.Deadline));

    const y = d3Scale.scaleLinear()
      .rangeRound([contentHeight, 0])
      .domain([0, d3Array.max(data, d => d.Id)]);

    const g = svg.append('g')
      .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');

    g.append('g')
      .attr('class', 'axis axis--x')
      .attr('transform', 'translate(0,' + contentHeight + ')')
      .call(d3Axis.axisBottom(x));

    g.append('g')
      .attr('class', 'axis axis--y')
      .call(d3Axis.axisLeft(y).ticks(10, '%'))
      .append('text')
        .attr('transform', 'rotate(-90)')
        .attr('y', 6)
        .attr('dy', '0.71em')
        .attr('text-anchor', 'end')
        .text('Frequency');

    g.selectAll('.bar')
      .data(data)
      .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', d => x(d.Deadline))
        .attr('y', d => y(d.Id))
        .attr('width', x.bandwidth())
        .attr('height', d => contentHeight - y(d.Id));
  }`

但是，在未将值传递给它的情况下，它抛出的映射未定义。