d3.js - stacked graphs that are both zoomed in and out/scrolled when using scrollwheel/drag on either graph
d3.js, javascript
Solution
For others who might be doing this where the graphs are not the same size, the answer can be more complicated, and I'll answer that question when it occurs. But fortunately for you, the answer is simple...
...use the same X axis for both graphs! Fixed it for you here.
http://jsfiddle.net/G6GPm/11/
Another suggestions: don't style things in javascript, prefer CSS. Try to use JS for attr only.
Problem
I have a pair of graphs that I wish to be tethered to the d3.js zoom() functionality. I looked on the d3.js API wiki but there is no documentation for the zoom() functionality yet. Basically, I want both graphs to be updated when the user zooms or drags either one. I cannot see how to apply the zoom behavior to two different graphs. I created a JSFiddle of a working example of the stacked graphs, but the zoom functionality only works on the upper graph: http://jsfiddle.net/G6GPm/2/ I want the zoom and drag to be applied to both graphs when either are modified. I know I need to modify the call to the zoom() behavior: ``` rect.call(d3.behavior.zoom().x(x).on("zoom", zoom)); ``` I see that this behavior is being applied to the x(x) axis, but I need it to be also applied to the x(x_sta) axis of the lower graph. I tried to break the zoom() function up, but without any API docs I am guessing what needs to happen: ``` rect.call(d3.behavior.zoom() .x(x).on("zoom", zoom) .x(x_sta).on("zoom", zoom) ); ``` This obviously fails. I have seen some other examples of d3.js interaction using multiple graphs, but nothing quite like this (two distinct graphs with their own axes and data etc). Thanks in advance.