CODEWITHSUNDEEP
d3.js
jfrankovich
jfrankovich

Reputation: 11

Holding Shift prevents mouse wheel zoom in firefox

I am trying to provide users 3 options when they zoom into a d3 chart with the mouse wheel with

d3.behavior.zoom():

zoom x and y: No modifiers

zoom x only: Hold Alt

zoom y only: Hold Shift

This works fine in firefox, but chrome is preventing my zoom from working when shift is held down. This same problem can be seen in in the d3 zoom example, if you hold down shift, the mouse wheel zoom no longer works:

http://bl.ocks.org/mbostock/3892919

I would try to use Ctrl instead of shift, but ctrl is already reserved for Browser Zoom Level.

Any idea if shift+mouse wheel is already reserved in chrome or if this something can be fixed in a future version of d3?

Upvotes: 0

Views: 674

Answers (1)

Tony
Tony

Reputation: 81

I had the same issue earlier today. When I investigated, I found that it was a "bug" in the d3 zoom behavior. You can find my pull request here: https://github.com/mbostock/d3/pull/1938.

If you look in the d3 repo at src/behavior/zoom.js:327, you'll see that the function is using d3.event.deltaY to get the scroll wheel delta, which is used to update the scale value. The problem is that, in Chrome, holding down the Shift key while scrolling scrolls the page horizontally, which sets deltaX instead of deltaY. Since d3 is only checking deltaY it gets a 0 value every time the Shift key is pressed.

Unfortunately I don't have a good work-around for you at the moment. In my case I may modify the d3 source file that we're using until/unless my fix is applied. Maybe someone else will have a better work-around.

Upvotes: 2

Related Questions