D3 stack area problem using typescript in angular

Question

Im trying to write a stacked area chart in typescript based upon this code:

http://jsfiddle.net/6LJjK/321/

The problem I am facing is how the stacks are rendered. Instead of "laying" on top of each other they all seems be rendered from 0 of the y-axis, and also in the wrong order. My guess is that is has something to do with

D3.stack()(<any>newDataset); being in the wrong format.

without type any I get the following error:

Argument of type '{ x: any; y: any; y0: number; }[][]' is not assignable to parameter of type '{ [key: string]: number; }[]'. Type '{ x: any; y: any; y0: number; }[]' is not assignable to type '{ [key: string]: number; }'. Index signature is missing in type '{ x: any; y: any; y0: number; }[]'.

My code:

ngAfterViewInit() {
    this.createChart();
  }

  getStackedData() {
    const dataset = [
      { year: 1, age1: 31, age2: 10, age3: 32, age4: 27 },
      { year: 2, age1: 32, age2: 12, age3: 30, age4: 26 },
      { year: 3, age1: 24, age2: 19, age3: 32, age4: 25 },
      { year: 4, age1: 26, age2: 18, age3: 31, age4: 25 },
      { year: 5, age1: 22, age2: 17, age3: 34, age4: 27 },
      { year: 6, age1: 24, age2: 17, age3: 33, age4: 26 },
      { year: 7, age1: 31, age2: 15, age3: 32, age4: 22 },
      { year: 8, age1: 30, age2: 15, age3: 35, age4: 20 },
      { year: 9, age1: 27, age2: 18, age3: 31, age4: 24 },
      { year: 10, age1: 25, age2: 15, age3: 35, age4: 25 },
      { year: 11, age1: 34, age2: 12, age3: 33, age4: 21 },
      { year: 12, age1: 31, age2: 14, age3: 32, age4: 23 },
      { year: 13, age1: 27, age2: 18, age3: 30, age4: 25 },
      { year: 14, age1: 25, age2: 20, age3: 35, age4: 20 }
    ];
    return dataset;
  }

  createChart() {
    const RecivedData = this.getStackedData();

    const svghHeight = 400;
    const svgWidth = 500;
    const marginTop = 10;
    const marginBottom = 20;
    const marginRight = 15;
    const marginLeft = 30;
    const chartHeight = 400 - marginTop - marginBottom;
    const Chartwidth = 500 - marginLeft - marginRight;


    const svgSelection = D3.select('#' + this.elementId).append('svg')
      .attr('width', svgWidth + marginLeft + marginRight)
      .attr('height', svghHeight + marginTop + marginBottom)
      .style('background-color', 'white')
      .attr('class', 'kpi-frame');


    const baseGroup = svgSelection
      .append('g')
      .attr('transform', 'translate(' + marginLeft + ',' + marginTop + ')');

    const yScale = D3.scaleLinear()
      .range([chartHeight, 0])
      .domain([0, 100]);

    const xScale = D3.scaleLinear().range([0, Chartwidth]);

    const yAxis = D3.axisLeft(yScale)
      .tickSize(2)
      .ticks(5)
      .tickFormat(function (d: any) { if (d === 100) { return d + '%'; } else { return d; } });


    const xAxis = D3.axisBottom(xScale).ticks(4);

    const newDataset = ['age1', 'age2', 'age3', 'age4'].map(function (n) {
      return RecivedData.map(function (d) {
        return { x: d.year, y: d[n], y0: 0};
      });
    });

      D3.stack()(<any>newDataset);


    xScale.domain(D3.extent(RecivedData, function (d) { return d.year; }));
    baseGroup.append('g')
      .attr('class', 'xaxis')
      .attr('transform', 'translate(0,' + chartHeight + ')')
      .call(xAxis);
    baseGroup.append('g')
      .attr('class', 'yaxis')
      .call(yAxis);


    const area = D3.area()
      .x(function (d: any) { return xScale(d.x); })
      .y0(function (d: any) { return yScale(d.y0); })
      .y1(function (d: any) { return yScale(d.y + d.y0); });


    const colors = ['#75d481', '#ff4848', '#ffac2e', '#7dbbf8'];

    const ageGroup = baseGroup.selectAll('.valgroup')
      .data(newDataset)
      .enter()
      .append('g')
      .attr('class', 'valgroup')
      .style('fill', function (d, i) {
        return colors[i];
      });

    ageGroup.append('path')
      .attr('d', function (d: any) {
        console.log(d);
        return area(d);
      });
  }
}

Answer 1

Stacking changed from v3 to v4. I'm not sure how exactly the old version worked, but in new one, you don't need the const newDataset = ['age1', 'age2', 'age3', 'age4'].map( ... ) part, but instead specify the keys array to the stack generator.

When stack is made, it puts it all into arrays, and for the area generator the d contains a 2D array -- y0 and y1 values. For the x value, you can access d 's data property and look it up from there.

 const dataset = [{ year: 1, age1: 31, age2: 10, age3: 32, age4: 27 }, { year: 2, age1: 32, age2: 12, age3: 30, age4: 26 }, { year: 3, age1: 24, age2: 19, age3: 32, age4: 25 }, { year: 4, age1: 26, age2: 18, age3: 31, age4: 25 }, { year: 5, age1: 22, age2: 17, age3: 34, age4: 27 }, { year: 6, age1: 24, age2: 17, age3: 33, age4: 26 }, { year: 7, age1: 31, age2: 15, age3: 32, age4: 22 }, { year: 8, age1: 30, age2: 15, age3: 35, age4: 20 }, { year: 9, age1: 27, age2: 18, age3: 31, age4: 24 }, { year: 10, age1: 25, age2: 15, age3: 35, age4: 25 }, { year: 11, age1: 34, age2: 12, age3: 33, age4: 21 }, { year: 12, age1: 31, age2: 14, age3: 32, age4: 23 }, { year: 13, age1: 27, age2: 18, age3: 30, age4: 25 }, { year: 14, age1: 25, age2: 20, age3: 35, age4: 20 } ]; const chartHeight = 200, chartWidth = 200; const yScale = d3.scaleLinear() .range([chartHeight, 0]) .domain([0, 100]); const xScale = d3.scaleLinear() .domain([0, 14]) .range([0, chartWidth]); const colors = ['#75d481', '#ff4848', '#ffac2e', '#7dbbf8']; var stackGen = d3.stack() .keys(["age1", "age2", "age3", "age4"]); var stackedData = stackGen(dataset); const area = d3.area() .x(function(d) { return xScale(d.data.year); }) .y0(function(d) { return yScale(d[0]); }) .y1(function(d) { return yScale(d[1]); }); var svg = d3.select('body') .append('svg') .attr('width', chartWidth) .attr('height', chartHeight); const ageGroup = d3.select('svg').selectAll('.valgroup') .data(stackedData) .enter() .append('g') .attr('class', 'valgroup') .style('fill', function(d, i) { return colors[i]; }); ageGroup.append('path') .attr('d', function(d) { return area(d); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <div id="chart1"></div>