d3js reusable chart components and transitions

Question

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

Answer 1

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.