Блог

Использование d3.js Я пытаюсь создать диаграмму областей с накоплением. Аналогично приведенной здесь диаграмме https://www.d3-graph-gallery.com/graph/stackedarea_basic.html

Необработанные данные:

 const temp = [
      {
        date: '2021-11-02',
        minutes: 324.8562,
        category: 'RED',
      },
      {
        date: '2021-11-02',
        minutes: 7.62,
        category: 'BLUE',
      },
      {
        date: '2021-11-03',
        minutes: 312.75004,
        category: 'RED',
      },
      {
        date: '2021-11-03',
        minutes: 16.02,
        category: 'BLUE',
      },
      {
        date: '2021-11-04',
        minutes: 17.98,
        category: 'BLUE',
      },
      {
        date: '2021-11-04',
        minutes: 368.9943,
        category: 'RED',
      },
      {
        date: '2021-11-05',
        minutes: 69.16,
        category: 'BLUE',
      },
      {
        date: '2021-11-05',
        minutes: 454.2809,
        category: 'RED',
      },
      {
        date: '2021-11-06',
        minutes: 126.4,
        category: 'BLUE',
      },
      {
        date: '2021-11-06',
        minutes: 552.66007,
        category: 'RED',
      },
      {
        date: '2021-11-07',
        minutes: 129.31,
        category: 'BLUE',
      },
      {
        date: '2021-11-07',
        minutes: 488.12957,
        category: 'RED',
      },
      {
        date: '2021-11-08',
        minutes: 130.69,
        category: 'BLUE',
      },
      {
        date: '2021-11-08',
        minutes: 591.40037,
        category: 'RED',
      },
      {
        date: '2021-11-09',
        minutes: 524.41064,
        category: 'RED',
      },
      {
        date: '2021-11-09',
        minutes: 65.23,
        category: 'BLUE',
      },
      {
        date: '2021-11-10',
        minutes: 466.05356,
        category: 'RED',
      },
      {
        date: '2021-11-10',
        minutes: 44.36,
        category: 'BLUE',
      },
      {
        date: '2021-11-11',
        minutes: 488.61332,
        category: 'RED',
      },
      {
        date: '2021-11-11',
        minutes: 29.57,
        category: 'BLUE',
      },
      {
        date: '2021-11-12',
        minutes: 518.73399,
        category: 'RED',
      },
      {
        date: '2021-11-12',
        minutes: 101.4,
        category: 'BLUE',
      },
      {
        date: '2021-11-13',
        minutes: 533.4546700000001,
        category: 'RED',
      },
      {
        date: '2021-11-13',
        minutes: 144.17,
        category: 'BLUE',
      },
      {
        date: '2021-11-14',
        minutes: 552.15265,
        category: 'RED',
      },
      {
        date: '2021-11-14',
        minutes: 176,
        category: 'BLUE',
      },
      {
        date: '2021-11-15',
        minutes: 631.04,
        category: 'RED',
      },
      {
        date: '2021-11-15',
        minutes: 122.44,
        category: 'BLUE',
      }
]
 

d3.js Код:

   // set the dimensions and margins of the graph
  var margin = {top: 20, right: 30, bottom: 30, left: 55},
      width = 460 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

 // append the svg object to the body of the page
  var svg = d3.select("#my-stacked-chart")
    .append("svg")
      .attr("width", width   margin.left   margin.right)
      .attr("height", height   margin.top   margin.bottom)
    .append("g")
      .attr("transform",
            "translate("   margin.left   ","   margin.top   ")");

    //  X axis
    const x = d3
      .scaleTime()
      .domain(d3.extent(temp, (d: any) => d.date))
      .range([0, width]);
    svg
      .append('g')
      .attr('transform', `translate(0, ${height})`)
      .call(d3.axisBottom(x).ticks(4));

    // Add Y axis
    const y = d3
      .scaleLinear()
      .domain([0, 5000])
      .range([height, 0]);
    svg.append('g').call(d3.axisLeft(y).ticks(3));

    // grouping data by date
    let groupByDate: any = d3.nest()
      .key((d: any) => {
        return d.date;
      })
      .entries(temp);

    // stacked groups
    var stackedData = d3.stack()
      .keys(['RED', 'BLUE'])
      .value(function(d, key){
        return d.values.find(i => i.category === key).minutes
      })(groupByDate)

    // Show the areas
    svg
      .selectAll("mylayers")
      .data(stackedData)
      .enter()
      .append("path")
        .attr("d", d3.area()
          .x(function(d) { return x(d3.timeParse('%Y-%m-%d')(d.data.key)) })
          .y0(function(d) { return y(d[0]); })
          .y1(function(d) { return y(d[1]); })
      )
 

Я получаю приведенную ниже ошибку 5 раз:

 Error: <path> attribute d: Expected number, "MNaN,331.050055LN…".
(anonymous) @   d3.v4.min.js?_=1638808768395:2
each    @   d3.v4.min.js?_=1638808768395:2
attr    @   d3.v4.min.js?_=1638808768395:2
eval    @   VM87456:208
myJSParser  @   myParser.js:21
(anonymous) @   myParser.js:81
 

Я получаю необходимые данные, stackedData но, похоже, не могу понять, как устранить эту ошибку. Был бы признателен за любую помощь в этом

Я предполагаю, что это потому, что ваш домен x был установлен неправильно. Сначала вы не проанализировали время:

 const x = d3
  .scaleTime()
  .domain(d3.extent(temp, (d: any) => d3.timeParse('%Y-%m-%d')(d.date)))
  .range([0, width]);