Lines not appearing in d3.js-CodePudding

I am trying to create a line chart with d3. The csv file looks like this:

code,country,date,cases
AFG,Afghanistan,2020-03-23,0.059
US,United States,2020-03-24,0.063
FR,France,2020-03-25,0.174
GR,Germany,2020-03-26,0.195,
AFG,Afghanistan,2020-03-23,0.233
US,United States,2020-03-24,0.285
FR,France,2020-03-25,0.278
GR,Germany,2020-03-26,0.257

I need to line to show the total values for each date. I used the d3.rollups() for this. However the chart doesn't display any line and the console is not returning any error.

This is the code I am using

let line1= d3.select("#linechart1")
    .append("svg")
        .attr("width", widthline - marginline.left - marginline.right)
        .attr("height", heightline - marginline.top - marginline.bottom)
    .append("g")
        .attr("transform", "translate("   marginline.left   ","   marginline.top   ")");

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

d3.csv("./multilinedata.csv").then(function(dataline) {
    dataline.forEach(function(d) {
        d.date = parseDate(d.date);
        d.cases =  d.cases;
        d.vaccinations=  d.vaccinations;
    });

  const totalCases = d3.rollups(dataline, d => d3.sum(d, e => e.cases), d => d.date);

    
let x = d3.scaleTime().domain(d3.extent(dataline, function(d) {return d.date;}))
    .range([0, width]);

let y = d3.scaleLinear().range([500, 0])
    .domain([0, d3.max(dataline, function(d) {return d.cases;})]);

let firstline = d3.line()
.x(function(totalCases) { return x(totalCases.date); })
.y(function(totalCases) { return y(totalCases.cases); })

  let axisX= line1.append('g')
  .attr('class', 'axis')
      .attr('transform', 'translate(0,'   500  ')')
      .call(d3.axisBottom(x))
  .append('text')
  .attr('x', 450)
  .attr('y', -10)
  .attr('fill', 'black')
  .attr('font-size', '12px')
  .text("Date");

  let axisY = line1.append('g')
  .attr('class', 'axis')
      .call(d3.axisLeft(y))
  .append('text')
  .attr('x', -15)
  .attr('y', 20)
  .attr('fill', 'black')
  .attr('font-size', '12px')
  .attr('transform', 'rotate(-90)')
  .text('New casses/vaccinations');

line1.selectAll('.line').data(totalCases).enter()
.append('path')
    .attr('fill', 'none')
    .attr('stroke-width', .5)
    .attr('class', 'line')
    .attr('d',d => firstline(d[1]))
.style('stroke', 'steelblue')
});

Would really appreciate it if someone could take a look! Thank you!

CodePudding user response：

Your totalCases is just an array of arrays, not an array of objects. Have a look:

const csv = `code,country,date,cases
AFG,Afghanistan,2020-03-23,0.059
US,United States,2020-03-24,0.063
FR,France,2020-03-25,0.174
GR,Germany,2020-03-26,0.195,
AFG,Afghanistan,2020-03-23,0.233
US,United States,2020-03-24,0.285
FR,France,2020-03-25,0.278
GR,Germany,2020-03-26,0.257`;

const data = d3.csvParse(csv, d3.autoType);

const totalCases = d3.rollups(data, d => d3.sum(d, e => e.cases), d => d.date);

console.log(totalCases);

<script src="https://d3js.org/d3.v7.min.js"></script>

Therefore, you have to change the line generator, since there's no date or cases properties:

let firstline = d3.line()
    .x(d => d[0])
    .y(d => d[1])

Because by default the x and y accessors of a line generator are the first and second elements in the inner array, that line generator can be even simpler, just this:

let firstline = d3.line()

Finally, change the d attribute: .attr('d', firstline)