Touchpad zoom broken in v5

[RyanColantuono]

Touchpad support for zooming seems to have been lost in the current d3 v5.

Example in v4 where touchpad zoom is working: https://jsfiddle.net/zshktfp9/2/

Example in v5 where touchpad zoom is no longer working: https://jsfiddle.net/zshktfp9/4/

The zoom code I am using is simple. I tested on mac in safari and chrome and on windows in chrome, the same break in functionality between v4 and v5 happened on all.

var zoom = d3.zoom() .scaleExtent([1, 10]) .on("zoom", function() { grp.attr("transform", d3.event.transform) }); svg.call(zoom);

[mbostock]

Can you be more precise about what you mean by “touchpad”? What device, operating system, and browser are you using?

Here are the changes in d3-zoom between d3 v4 and v5:

https://github.com/d3/d3-zoom/compare/v1.7.1...v1.8.3

I don’t see any problems with zooming on multitouch devices, so I’m not able to investigate further. But if you’re willing to provide more information, I can reopen to investigate further. The most helpful information would be to try different versions of d3-zoom to isolate at which point the behavior changed.

[RyanColantuono]

Think I found whats giving me the issue.

This change: https://github.com/d3/d3-zoom/commit/295cb421b1cd1720c5b37722b371211449505402

For some reason, when I use two fingers on the touchpad to zoom on my mac, its considering d3Selection.event.ctrlKey to be true. Thus its filtering out that event from zooming on the svg. If I remove the ctrlKey check, the zoom works.

On a macbrook pro, mojave version 10.14.3 using Chrome 79.0.3945.130.

[mbostock]

Do you have some trackpad setting or extension installed that would affect the behavior of two-finger zooming?

[RyanColantuono]

None that I am aware of. I use a usb mouse and keyboard occasionally with the mac. I unplugged those and rebooted just incase those were somehow messing with it, but the same issue persists.

I had a few coworkers try the jsfiddle examples in the initial post and they all had the same issue on their macs.

[RyanColantuono]

We are currently on v3 and I am looking at getting all of our charts working in v5, which is where I found this issue. For now I can just point at d3-zoom 1.7.3, however I wanted to make you aware of the issue.

This issue was was posted August 15th 2019, but was closed because it lacked detail. It was probably referencing this same issue. D3-zoom 1.7.4, which is what has the change that creates the issue for me, was released August 7th 2019.

[mbostock]

Have you tried overriding the default filter? If your hypothesis is correct, this should be the fix:

zoom.filter(() => !d3.event.button)

[mbostock]

I would also accept a PR changing the default filter so that it only applies the ctrlKey and button tests for mousedown events.

function defaultFilter() {
  return event.type !== "mousedown" || !(event.ctrlKey || event.button);
}

[RyanColantuono]

That does indeed work. If I have to, I can use this to stay on current versions. Still seems weird that the issue is happening for me and coworkers but no one else.

[oleksiyyevtushok]

That does indeed work. If I have to, I can use this to stay on current versions. Still seems weird that the issue is happening for me and coworkers but no one else.

Had the same issue. Ofc zoom.filter(() => !d3.event.button) has fixed it

[Fil]

How would this play with https://github.com/d3/d3-zoom/pull/213 ?

[EWhite613]

Is there plans to patch this to 1.x.x? Seems like it's only fixed in v2, so v1 is broken