CODEWITHSUNDEEP
javascriptd3.js
ARobertson
ARobertson

Reputation: 3

d3.js difference chart area transitions

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?

Upvotes: 0

Views: 321

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

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.

Upvotes: 1

Related Questions