D3 捏缩放在 v5 中不起作用，但在 v4 中起作用答案

【问题标题】：D3 pinch to zoom doesn't work in v5, but works in v4D3 捏缩放在 v5 中不起作用，但在 v4 中起作用
【发布时间】：2020-05-15 06:52:10
【问题描述】：

在我的 Mac 上使用两根手指放大触摸板可在 D3v4 上运行：

https://jsfiddle.net/zshktfp9/2/

单击 svg 并按我的预期进行缩放。

但相同的代码在 v5 中不再适用：

https://jsfiddle.net/zshktfp9/4/

它不再在 svg 内缩放，而是整个浏览器缩放。

我在 chrome 和 mac 上的 safari 上尝试过这个，并让朋友在 windows chrome 上测试它，同样的功能中断发生在 v4 和 v5 之间。

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

据我所知，我没有发现我应该在 v5 中做一些不同的事情。是我遗漏了什么，还是这是 D3.js 中的错误？

【问题讨论】：

标签： javascript d3.js zooming

【解决方案1】：

我认为这可能是一个错误，因此我提交了https://github.com/d3/d3-zoom/issues/204 - 我不确定如何在启用 mac 捏合缩放时禁用 ctrl + 单击，因此我无法创建拉取请求。

现在您可以通过覆盖过滤器函数来解决这个问题：

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

这会恢复 v4 的行为。

【讨论】：