d3.js difference chart area transitions

Question

I'm having trouble getting the area portions of a difference chart to properly execute transitions.

As I am still learning, the chart is based on Mike Bostock's Difference Chart example and the transitions were guided by d3noob's transitions post .

Relevant bits:

  svgchin.select("#clip-above-chin path")
    .duration(750)
    .attr("d", area.y0(0));

  svgchin.select("#clip-below-chin path")
    .duration(750)
    .attr("d", area.y0(height));

  svgchin.select(".area.above")
    .duration(750)
    .attr("d", area.y0(function(d) { return y(d["Post"]); }));

  svgchin.select(".area.below")
    .duration(750)
    .attr("d", area);

Full jsFiddle here: http://jsfiddle.net/uxb3yq9g/6/

As you can see, the lines and axes update as intended. The areas, however, are not yet on board.

Any ideas?

Answer 1

You haven't actually updated the data bound to the elements. Just do

var svgchin = d3.select("#chinook").datum(data).transition();

and everything works fine. Complete demo here .