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 3 months ago
Fixed. Can you look again please?
TheOsch 3 months 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 3 months 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 3 months 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 3 months 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 3 months ago
Thank you, I see now. Will do this way.
TheOsch 3 months 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 3 months ago
That's it - "centered"! Very good, just a minute.
TheOsch 3 months ago
Uhhh... Now it seems to work like that one. Please check when you'll have a minute.
TheOsch 3 months 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 3 months ago
Didn't notice. Fixed.
TheOsch 3 months ago
Thank you!
parliament718 3 months ago