D3 問題在帶時間軸的堆積面積圖上渲染數據

Question

我正在嘗試獲取一個堆疊面積圖以在 angular 中使用 d3 進行渲染，但是當我添加從小數 0、1、2、3 映射到底軸的更改值到日期 20190101、20200101、20210101 時，它不再呈現。

我似乎找不到解決這個問題的方法

有問題的代碼：

  draw(graphAnchorId, data, timeline) {
  
    const chartHeight = 100;
    const chartWidth = 200;

    const yScale = d3.scaleLinear().range([chartHeight, 0]).domain([0, 100]);
    const xScale = d3.scaleLinear().domain([0, 14]).range([0, chartWidth]);

    const tParser = d3.timeParse("%Y%m%d");

    const colors = ["#ffa600BB","#ff6e54BB","#dd5182BB","#955196BB","#444e86BB","#003f5cBB"];
    var stackGen = d3.stack().keys(["age1", "age2", "age3", "age4"]);
    var stackedData = stackGen(data);

/*-----------Setup The Box to draw graph in---------------------------------------------------------------------------------------------------------------*/
    var svg = d3
    .select("#"+graphAnchorId)
    .append("div")
    .classed("svg-container", true) //container class to make it responsive
    .append("svg")                  // Place the chart in 'pie-chart-div'
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 100 200") // <min-x> <min-y> <width> <height>
    .classed("svg-content-responsive", true)
    .attr("width", "100%")
    .attr("height", "100%");
    
    var vis = svg
    .data([data]).attr("width", "95%").attr("height", "80%")
    .attr("viewBox", -20 + " " + 20 + " " + (chartWidth) + " " + chartHeight)// <min-x> <min-y> <width> <height>
    .attr("preserveAspectRatio", "xMinYMin");
/*-----------Setup The Box to draw graph in---------------------------------------------------------------------------------------------------------------*/

/*-----------Draw Graph---------------------------------------------------------------------------------------------------------------*/
    const area = d3.area()
      .x(function(d) {  return xScale(d.data.date)})
      .y0(function(d) { return yScale(d[0]);})
      .y1(function(d) { return yScale(d[1]);});

    const ageGroup =svg.selectAll('.valgroup')
      .data(stackedData)
      .enter()
      .append('g')
      .attr('class', 'valgroup')
      .attr("stroke", "#222222CC")
      .attr("stroke-width", 0.25)
      .style('fill', function(d, i) {return colors[i];});

    ageGroup.append('path').attr('d', function(d) { return area(d); })
/*-----------Draw Graph---------------------------------------------------------------------------------------------------------------*/

/*-----------Add Axis---------------------------------------------------------------------------------------------------------------*/
/*-----------Add Axis Y ------------------------------------------------------------*/
    var y = d3.scaleLinear().domain([0, d3.max(data, function(d) { return d.age1+d.age2+d.age3+d.age4; })])
      .range([ chartHeight, 0 ]);
    svg.append("g").call(d3.axisLeft(y));
/*-----------Add Axis Y ------------------------------------------------------------*/
/*-----------Add Axis X ------------------------------------------------------------*/
    if(timeline){
      var x = d3.scaleTime()
      .domain(d3.extent(data, function(d) {console.log("date------>>>> ",d.date,tParser(d.date) ); return tParser(d.date);  }))
      .range([ 0, chartWidth ]);
      svg.append("g")
        .attr("transform", "translate(0," + chartHeight + ")")
        .call(d3.axisBottom(x));
    }else{
      var x = d3.scaleLinear()
      .domain([d3.min(data, function(d) { return d.date; }), d3.max(data, function(d) { return d.date; })])
      .range([ 0, chartWidth ]);
  
      svg.append("g")
        .attr("transform", "translate(0," + chartHeight + ")")
        .call(d3.axisBottom(x));
    }
/*-----------Add Axis X ------------------------------------------------------------*/
/*-----------Add Axis---------------------------------------------------------------------------------------------------------------*/
  }  

這是一個堆棧閃電戰： https://stackblitz.com/edit/angular-ivy-q689ep?file=src%2Fapp%2Fapp.component.html,angular.json,src%2Fapp%2Fapp.module.ts,src%2Fapp% 2FstackedArea-chart-visualization%2FstackedArea-chart-visualization.component.ts

謝謝你的幫助

編輯

請注意，在處理此問題時，我意識到帶有日期的數據是問題所在（x 軸不是導致問題的原因）。 它可以像這樣呈現數據：{ date: 0 , age1: 31, age2: 10, age3: 32, age4: 27 },

它無法使用此新日期呈現數據 { date: 20180101 , age1: 31, age2: 10, age3: 32, age4: 27 },

Answer 1

我通過交換解決了這個問題

const area = d3.area()
  .x(function(d) {  return xScale(d.data.date)})
  .y0(function(d) { return yScale(d[0]);})
  .y1(function(d) { return yScale(d[1]);});

為了這

const area = d3.area()
  .x(function(d) {  return x(d.data.date)})
  .y0(function(d) { return yScale(d[0]);})
  .y1(function(d) { return yScale(d[1]);});