时间戳

首页 > 解决方案 > D3 捏缩放在 v5 中不起作用，但在 v4 中起作用

javascript - D3 捏缩放在 v5 中不起作用，但在 v4 中起作用

问题描述

在 D3v4 上使用两根手指放大我的 mac 上的触摸板：

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

单击 svg 和缩放就像我期望的那样工作。

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

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

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

我在 Mac 上的 chrome 和 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 中的错误？

标签： javascriptd3.jszooming

解决方案

我认为这可能是一个错误，所以我提交了https://github.com/d3/d3-zoom/issues/204 - 我不确定如何在启用 mac pinch-to-zoom 时禁用 ctrl + click 所以我不能不要创建拉取请求。

现在，您可以通过覆盖 filter 函数来解决此问题：

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

这恢复了 v4 行为。

推荐阅读