D3 resuable chart: y-axis overwritten

Question

I've made a reusable chart following Mike Bostock's convention (http://bost.ocks.org/mike/chart/?utm_source=feedly). Works like a charm, except that the y-axis always uses the height of the last updated graph.

Code: http://plnkr.co/edit/hn6MgDVJNfdTwzMvvCOa?p=preview

The height is getting updated at line 69 of the HTML.

Can anyone tell me what I'm doing wrong here?

Answer 1

The problem is that you declared the scales outside the scope of the function that is executed when you call the component on a selection. This means that updating them in one place will also affect all the other graphs that use the same component.

To fix, you can either instantiate the component several times or move the declaration of scales/axes inside the function that is called on the selection.