I’ve created a function that produces charts of the parameter variables input. It’s almost working as I could like except that when I switch which plot to zoom on, it resets to the x range from the last time I zoomed on that plot, even though the zooms are set to sync with each other…
Easier if you just checkout the notebook ( you can see the brush jumping around when zooming between plots.
I need the updated x.domain of all the charts to always match. I’ve fiddled with a few different techniques but no joy… any help would be appreciated, as always.
BTW I see the lines are both the same variable, but that’s for me to figure out
The zoom behavior stores its state on the element you bind it to. (See d3.zoomTransform for how to inspect the zoom state that is bound to a particular element.)
So, since you have two elements (one per iteration of your vars.forEach loop), you have two different independent states of the zoom behavior. Since you are redrawing all the charts when anyone of them zooms, it looks like you’re keeping the charts in-sync, but in reality, this hidden state of the zoom behavior is only being updated on the chart you are interacting with.
To fix this, either: 1. Apply the zoom behavior to the top-level SVG rather than each chart separately so that you only have one zoom state. Or, 2. Use zoom.transform to update the other charts programmatically when the user interacts with a chart.
Ah, I see. I chose option 1 and it worked! (updated shared link) Thanks!