I am following Mike Bostock's pattern for reusable charts - closures with getter/setters. But somehow, when I instantiate a new chart object with new properties, existing charts are being updated with these properties:
var chart1 = new StackedAreaChart();
d3.select('#chart1')
.data([data])
.call(chart1);
// a new chart - whose properties end up in chart1!
var chart2 = new StackedAreaChart().colors(['green', 'blue']);
Here's an example: http://jsfiddle.net/samselikoff/YZ6Ea/3/. Resize the window to see the first chart re-rendered, with a stylish but unexpected green tint.
I am baffled by this. I suspect (1) my setter is mutating the actual 'constructor', and (2) somehow chart1
is really a reference to this constructor, rather than being a separate instance of it like I thought.
I was thinking of using this.margin = ...
instead of var margin =
, but since this is the suggested pattern I wanted to post here first. What am I missing?