CODEWITHSUNDEEP
javascriptd3.js
swenedo
swenedo

Reputation: 3114

d3js reusable chart components and transitions

I am trying to create graphs using the reusable component approach Mike Bostock describes in this article. I am however experiencing that calling .transition() on a selection outside of the component doesn't cause a transition on the attributes I expected.

For example I have made this plunker which demonstrates my question. In this example I use Mike's timeSeriesChart function and then simply changes the width or the height. By using the transition operator on a selection of the chart I then call the timeSeriesChart function to see the width transform to its new value. However, the width/height changes instantly and only the axes smoothly transition to their new lengths.

If I add .transition().duration(x) when updating the width's inside the component the widths are updated smoothly, but I don't want to clutter the component with transition operators, and I think it should work to do it outside as well. It certainly seems to work for the axes.

What am I missing?

To see the code go to the plunker

Upvotes: 1

Views: 300

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

If you look at the source of the axis component, you'll see that all element selectors are wrapped in d3.transition(). This is what makes the transition happen transparently.

I've applied this to your plunker here. All you need to do is to replace

g.select(".area")

with

d3.transition(g.select(".area"))

and similarly for the line.

Upvotes: 2

Related Questions