Cfrgtkky

I am trying to emulate the animated/transitioned line chart shown in this demo (without the dots). I am furthermore trying to use it in a react component where the update method can be called by another component, making the d3 stuff kind of like helper functions and not just run top to bottom as the demo does.

The problem is that when the x-axis (date range) increases, the line/data associated with the newly added dates, do not "animate in": they appear on the chart instantly. This has an effect where the line that is already there animates to its new position, and moves across the newly-appeared line, making an ugly overlap for about half a second.

You can see this if you press the Update button on the CodeSandbox here. It is randomly generated dummy data, so you may have to click it a few times to see the effect.

How can I smoothly apply the transition to the new data?

Relevant D3 code:

import * as d3 from 'd3';



var line;

var svg;

var plotLine;

var xScale, yScale;

var xAxis, yAxis;

var parseTime = d3.timeParse('%d-%b-%y');

var displayDateFormat = '%d-%b-20%y';



function transormData(datum) {

  return {

    date: parseTime(datum.date),

    close: parseInt(datum.close, 10)

  };

}

export default function sharedChartFn(firstRun, data) {

  data = data.map(transormData);



  var margin = {

      top: 20,

      right: 20,

      bottom: 30,

      left: 50

    },

    width = 800 - margin.left - margin.right,

    height = 400 - margin.top - margin.bottom;



  xScale = d3

    .scaleLinear()

    .range([0, width])

    .domain(

      d3.extent(data, function(d) {

        return d.date;

      })

    )

    .nice();



  yScale = d3

    .scaleLinear()

    .range([height, 0])

    .domain(

      d3.extent(data, function(d) {

        return d.close;

      })

    )

    .nice();



  xAxis = d3.axisBottom(xScale).ticks(12);

  yAxis = d3.axisLeft(yScale).ticks((12 * height) / width);



  plotLine = d3

    .line()

    .curve(d3.curveMonotoneX)

    .x(function(d) {

      return xScale(d.date);

    })

    .y(function(d) {

      return yScale(d.close);

    });



  svg = d3

    .select('#plot')

    .append('svg')

    .attr('width', width + margin.left + margin.right)

    .attr('height', height + margin.top + margin.bottom);



  svg

    .append('g')

    .attr('class', 'x axis ')

    .attr('id', 'axis--x')

    .attr(

      'transform',

      'translate(' + margin.left + ',' + (height + margin.top) + ')'

    )

    .call(xAxis.tickFormat(d3.timeFormat(displayDateFormat)));



  svg

    .append('g')

    .attr('class', 'y axis')

    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

    .attr('id', 'axis--y')

    .call(yAxis);



  line = svg

    .append('g')

    .append('path')

    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')

    .datum(data)

    .attr('d', plotLine)

    .style('fill', 'none')

    .style('stroke', 'brown');

}



function update(newData) {

  newData = newData.map(transormData);

  console.log('parsed', newData);

  debugger;

  xScale

    .domain(

      d3.extent(newData, function(d) {

        return d.date;

      })

    )

    .nice();

  yScale

    .domain(

      d3.extent(newData, function(d) {

        return d.close;

      })

    )

    .nice();



  xAxis = d3.axisBottom(xScale); //.ticks(12);

  yAxis = d3.axisLeft(yScale); // .ticks((12 * height) / width);



  svg

    .select('.x')

    .transition()

    .duration(750)

    .call(xAxis.tickFormat(d3.timeFormat(displayDateFormat)));

  svg

    .select('.y')

    .transition()

    .duration(750)

    .call(yAxis);



  line

    .datum(newData)

    .transition()

    .duration(750)

    .attr('d', plotLine)

    .style('fill', 'none')

    .style('stroke-width', '2px');

}



export { update };

The animation is done on the generated path attributes. If you have more points in the update they are not animated but drawn at the correct location.

Solution: draw the new points on the old xScale/yScale. Now the path has the same amount of numbers. Change the xScale/yScale. Animate the line to these new scales.

function update(newData) {

  newData = newData.map(transormData);

  line

    .datum(newData)

    .attr('d', plotLine)

    .style('fill', 'none')

    .style('stroke-width', '2px');



  console.log('parsed', newData);

  .....

  // change scales

  ....

  line

    .transition()

    .duration(750)

    .attr('d', plotLine);

}