D3 V3 - Sync Brush Zoom And Scroll Zoom

I'm trying to add brush zoom and scroll zoom within the same chart but for it's getting a bit difficult to sync both which depend on X and Y both. How do I compute the translate an

Solution 1:

Looks like there's no way to transform both X and Y at the same time as mentioned by Mike here: https://github.com/d3/d3-zoom/issues/48

P.S. If you have a restricted zoom i.e. either horizontal or vertical, then you can make both the zoom functions work together by applying appropriate scales.

For example for X translation and scale:

k_x = (x.range()[1]-x.range()[0]) / (fullX(sx[1]) - fullX(sx[0])); t_x = fullX.range()[0] - fullX(sx[0]) * k_x

While for Y axes translation and scale,

k_y = (y.range()[1]-y.range()[0]) / (fullY(sy[1]) - fullY(sy[0])));ty = fullY.range()[0] - fullY(sy[0]) * k_y;

There are a couple of workarounds mentioned within this issue which I'll be looking into and if anything works out smooth, I'll post it on here.