D3堆棧中使用打字稿的角度問題

Question

我試圖根據以下代碼在打字稿中編寫堆積面積圖：

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

我面臨的問題是如何呈現堆棧。 它們似乎不是從彼此的頂部“放置”，而是從y軸的0開始繪制，而且順序也錯誤。 我的猜測是這與

D3.stack()(<any>newDataset); 格式錯誤。

沒有任何類型我得到以下錯誤：

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; }[]'.

我的代碼：

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

堆疊從v3更改為v4。 我不確定舊版本的工作原理如何，但是在新版本中，不需要const newDataset = ['age1', 'age2', 'age3', 'age4'].map( ... )部分，而是指定堆棧生成器的keys數組。

生成堆棧時，它將全部放入數組中，對於區域生成器， d包含2D數組-y0和y1值。 對於x值，您可以訪問d的data屬性並從那里查找它。

 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>