really struggling trying to animate this multi-line chart. I am using React and D3. When the page renders, I would like the lines to animate across the x-axis.

I tried to add d3.easeLinear, but it just eased in the thickness of the lines themself, as opposed to animating the line.

      width = 1000 - margin.left - margin.right,
      height = 800 - margin.top - margin.bottom;

      const svg = d3.select(svgRef.current)
        .append("svg")
          .attr("width", width)
          .attr("height", height + margin.top + margin.bottom)
        .append("g")
          .attr("transform", `translate(${margin.left},${margin.top})`);

      // group the data: I want to draw one line per group
      const sumstat = d3.group(data, d => d.name); // nest function allows to group the calculation per level of a factor
    
      // Add X axis --> it is a date format
      const x = d3.scaleLinear()
        .domain([0,data[data.length-1].week])
        .range([ 0, width ]);
      svg.append("g")
        .attr("transform", `translate(0, ${height})`)
        .call(d3.axisBottom(x).ticks(32));
    
      // Add Y axis
      const y = d3.scaleLinear()
        .domain([0,25])
        .range([ height, 0 ]);
      svg.append("g")
        .call(d3.axisLeft(y));
    
      // color palette
      const color = d3.scaleOrdinal()
        .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])
    
      // Draw the line
      svg.selectAll(".line")
          .data(sumstat)
          .join("path")
          // .transition()
          //   .duration(4000)
          //   .ease(d3.easeLinear)
            .attr("fill", "none")
            .attr("stroke", function(d){ return color(d[0]) })
            .attr("stroke-width", 1.5)
            .attr("d", function(d){
              return d3.line()
                .x(function(d) { return x(d.week); })
                .y(function(d) { return y(+d.wins); })
                (d[1])
            })
    })

Thanks so much!