How to wire path/chart redraw after y domain changes - d3.js

Question

I want to draw multiple barcharts into the same visualization.
When the first barchart is drawn it ḱnows nothing about the domain of the 2nd, 3rd, etc. At the time the 2nd barchart is drawn the domain of the y scale changes. 'Consequently the first barchart needs to be redrawn. The question is what is a good way to wire up the redraw since the scale/domain has no change notification mechanism.
http://bl.ocks.org/markfink/4d8f1c183e6cd9d6ea07

Answer 1

Here's one implementation: http://jsfiddle.net/tBHyD/2/
I only tried to address the setup in the question, not the full implementation noted in your comment. There are lots of ways to accomplish this; this one uses an event-driven model, using d3.dispatch:
var evt = d3.dispatch("change");
The key here is to update the scale extents globally, then fire an event if they've changed. Here I use a function, updateExtent, for this purpose:
var x0 = Infinity,
x1 = -Infinity,
y0 = Infinity,
y1 = -Infinity;
function updateExtent(data) {
var extx = d3.extent(data, function(d) { return d[0]; }),
exty = d3.extent(data, function(d) { return d[1]; }),
changed;
// update
if (extx[0] < x0) { x0 = extx[0]; changed = true; }
if (extx[1] > x1) { x1 = extx[1]; changed = true; }
if (exty[0] < y0) { y0 = exty[0]; changed = true; }
if (exty[1] > y1) { y1 = exty[1]; changed = true; }
// if changed, update scales and fire event
if (changed) {
// update scales
x.domain([x0, x1]);
y.domain([y1, y0]);
// update axes
vis.select(".x.axis").call(xAxis);
vis.select(".y.axis").call(yAxis);
// fire event
evt.change();
}
}
Then the redraw function sets a listener:
function redraw(selection, data, style) {
var bar = selection.selectAll(".bar")
.data(data);
// enter
bar.enter().append("rect")
.attr('class', "bar")
.attr("width", 5)
.style(style);
function updateBar() {
// update
bar
.attr("x", function(d) { return x(d[0]) - .5; })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return height - y(d[1]); });
}
// initial call
updateBar();
// handler call
evt.on("change", updateBar);
};
Note that now you don't need to set the extent explicitly:
var data1 = [[2,0.5], [4,0.8], [6,0.6], [8,0.7], [12,0.8]];
updateExtent(data1);