D3 line path update animation not smooth

Question

I have a graph comprised up of areas, lines and circles that I am trying to update on user input, which I have already gotten to work, but when transitioning from a lower data amount to a higher amount, say from [4,2,3,4,5] to [2,4,3,1,5,8,6] , the lines animate their current paths to their new positions, but the offset just gets snapped into place, there is no animation for any new values added to the paths.

What I would like it to do is animate from the current line path, to the new line path, with a smooth transition, so that the new values don't just snap into place, regardless of the number of data.

Also, on a side note, the graphs width keeps changing on update, I'd like it to stretch to the full width of the svg no matter how much data is present, how could I achieve that?

Here is a fiddle of what I have thus far http://jsfiddle.net/znmBy/ .

I hope I was clear enough, I am new to D3 so I am a little unsure about the terminology.

Answer 1

The problem you describe is a bit more complex since in D3 you first have to add an object at a fixed position and then you can animate it from the original to another position.

In your example, i would either compute the new (intermediate) initial positions based on the previous values, and then update the charts again with the real final values. This will create a nice path animation from the start to the final position:

    updateGraph([
            [...].concat(computeLatestIntermediates()),
            [...].concat(getLatestTimes())
          ]);

    updateGraph([
            [...].concat(getRealValues()),
            [...].concat(getLatestTimes())
          ]);

Alternatively you can set the initial values to 0 . This will create a nice animation from the bottom to the target value:

    updateGraph([
            [..., 0, 0, 0, 0],
            [...,10,12,13,14]
          ]);

    updateGraph([
            [..., 234, 245, 210, 170],
            [...,  10,  12,  13,  14]
          ]);

Btw: When animating line charts you usually have several other issues. Some of them are covered on Mike's path animation page . There is also a related question here .

Edit (smarter solution):

Instead of calling the update function twice, you could implement this two-step-drawing inside your drawing function like this:

function getPathData(d,i)        { return "M 0,0 ... L n,n"; }
function getInitalTransform(d,i) { return "translate(...)";  }
function getFinalTransform(d,i)  { return "translate(...)";  }

path
    .attr("d", getPathData)
    .attr("transform", getInitalTransform)
  .transition()
    .ease("linear")
    .attr("transform", getFinalTransform);