realmente luchando tratando de animar este gráfico de varias líneas. Estoy usando React y D3. Cuando la página se muestra, me gustaría que las líneas se animaran a lo largo del eje x.

Traté de agregar d3.easeLinear, pero simplemente disminuyó el grosor de las líneas, en lugar de animar la línea.

 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]) }) })

¡Muchas gracias!