D3.js - Difficult zoom problem
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need a solution to this question:
https://stackoverflow.com/questions/61071276/d3-synchronizing-2-separate-zoom-behaviors

There I have provided a codepen. The solution should be a minimal modification to the originally provided codepen (not some standalone solution without d3fc lib that will force me to rewrite a lot of my code).

https://codepen.io/parliament718/pen/BaNQPXx

Also, the Y-axis should automatically re-scale to the visible data as the user is zooming/panning, however it should STOP doing this as soon as the user manually re-scales the axis (via drag).

If you want to see an example of the desired behavior, refer to charts on TradingView.com, which have the exact desired behavior.

awarded to TheOsch

Crowdsource coding tasks.

1 Solution

Winning solution

Here's what I did. Looks like what you need, doesn't it?

https://codepen.io/Osch/pen/abdVNxP?editors=0011

The problem was in d3.event.transform: it's the same for all zoom operations, and it doesn't have separate scales for x and y. The proposed solution is:

  • remove yAxisZoom;
  • make yAxisDrag manually construct the proper transform and apply it to y.domain
Thank you for your attempt but this won't suffice. There is a noticable change in the sensitivity of the panning from before to after rescaling the Y-axis. The chart should retain its original zooming/panning behavior and sensitivity, regardless of whether the y-axis is scaled or not.
parliament718 13 days ago
Fixed. Can you look again please?
TheOsch 13 days ago
Thank you, it's better but still needs some tweak. The drag behavior has some problems. Please see a trading view chart for example https://www.tradingview.com/chart/P5oDefoI/ Dragging the axis there evenly scales the data around the mouse point. In your example dragging the scale up just moves the data down and out of the view.
parliament718 12 days ago
I cannot access the chart at this link (probably it's private) but I understand what are you are telling about. Just a few minutes.
TheOsch 12 days ago
Excuse me, what do you mean by "the mouse point" - the point where the it is during drag or where the drag was started?
TheOsch 12 days ago
Here's a public chart https://www.tradingview.com/chart/BTCUSD/b6Qbn8ee-BTCUSD-Trendlines-do-work-Simple-yet-effective/ Dragging the scale should work like it does there. Thanks
parliament718 12 days ago
Thank you, I see now. Will do this way.
TheOsch 12 days ago
I'm not sure exactly what's implemented there but it does seem that the sensitivity of the drag is slight affected by where you start dragging. If I start dragging from the middle, it appears to be a little less sensitive than if I start all the way at the bottom of the scale. However, either way the data stretches in a way that it still appears centered. I'm not sure how exactly this work but I hope the example makes it clear.
parliament718 12 days ago
That's it - "centered"! Very good, just a minute.
TheOsch 12 days ago
Uhhh... Now it seems to work like that one. Please check when you'll have a minute.
TheOsch 12 days ago
You're very close. The axis drag behavior is good now but the zoom has an issue that it didn't have in your previous version. I believe the issue is that it's zooming on both axes, instead of only horizontally like before. Please restore original zoom behavior and keep this new drag behavior and the bounty is yours!
parliament718 12 days ago
Didn't notice. Fixed.
TheOsch 12 days ago
Thank you!
parliament718 12 days ago