animation - How to animate areas of a D3 area chart?

Question

How can d3 areas have their transitions animated? I've seen examples for lines but can't find anything on animating an area.

Eg area:

var area = d3.svg.area()
    .x(function(d) { return x(d.x); })
    .y0(height)
    .y1(function(d) { return y(d.y); });

Update: I've found an example for an area chart but I don't understand it. How is this function creating the area transition?

function transition() {
  d3.selectAll("path")
      .data(function() {
        var d = layers1;
        layers1 = layers0;
        return layers0 = d;
      })
    .transition()
      .duration(2500)
      .attr("d", area);
}

Answer 1

The transition of areas works just like for other attributes. Only in case of areas, we are interpolating strings instead of interpolating numbers. When you call the area function with some data, then it produces a string which looks like M0,213L4,214L9,215 ... L130,255.7, which is a DSL used for the d attribute. When you change the data you pass to the area function, this string changes and D3 interpolates them.

Regarding the example you have found, the interesting bit which causes the transition is only this:

    .transition()
      .duration(2500)
      .attr("d", area);

The other part merely is a fancy way of alternatively returning layers1 and layers0 as the data for the area function on consecutive calls.

  d3.selectAll("path")
      .data(function() {
        var d = layers1;
        layers1 = layers0;
        return layers0 = d;
      })