Javascript D3禁用pan&；滚动时缩放

我已经渲染了一个启用了平移和缩放功能的d3地图，但是当在桌面或移动设备上向下滚动视口时，窗口在地图中缩放时会卡住

有没有办法在窗口滚动时暂时禁用d3.zoom

我已经看到了使用按钮切换缩放/平移的方法，如下所示：，但我想知道是否可以不添加按钮。这是我当前的缩放逻辑

谢谢

this.zoom = d3.zoom()
  .scaleExtent([1, 8])
  .on('zoom', () => {
    this.svg.attr('transform', d3.event.transform);
  });

this.svg = d3.select(this.el).append('svg')
    .attr('width', '100%')
    .attr('height', this.height)
    .attr('class', 'bubble-map__svg-us')
    .call(this.zoom)
    .append('g');

---

编辑：哇，老答案，但从来没有看到你的评论。很抱歉。对不起，我忘了考虑移动变焦。

在文档中，这可能是新的，但他们建议通过使用更精确地控制允许的缩放。对于触摸相关事件，它们还支持

如文件中所述

要仅禁用滚轮驱动的缩放（例如，不干扰本机滚动），可以在将缩放行为应用于选择后删除缩放行为的滚轮事件侦听器：

挑选 .呼叫（缩放） .on（“wheel.zoom”，空）

---

你也可以考虑将<代码> SisteReale为<代码> [1,1] ，特别是如果只是临时的，那么它只能将缩放锁定到一个可能的比例，但是最好选择文档所说的：P< /P>

，因为我正在处理类似的问题。也许对于后面的任何人来说，处理这个问题的一个简单方法可能是使用

zoom（）

实例提供的

filter（）

方法。这将允许您在应用或完全忽略缩放事件之间切换。它比暂时将

null

设置为观察者要好一点，因为至少在我的经验中，事件仍然会被记录和叠加。因此，一旦重新启用处理程序，您将以意外的跳跃放大或缩小。看起来，过滤器实际上忽略了正在发生的事情。实施：

let isZooming = true; // Use controls to set to true or false

zoom()
    // Make sure we only apply zoom events if zooming is enabled by the user
    .filter(() => isZooming)
    .on('zoom', event => {
      // Specify whatever you want to do with the event
    });

---

文档：

缩放和滚动使用相同的手势-如何区分它们？如何确定鼠标滚轮是用于滚动还是缩放？这将禁用滚轮缩放功能，但会在手机/平板电脑上拖动鼠标滚轮进行收缩缩放。我翻了翻文档，没有看到任何事件。而且我们的想法是在用户滚动窗口时将wheel.zoom设置为null，并在用户停止滚动窗口时重新启用它吗？@ChrisWilliams嘿，对不起，我从来没有看到你的评论><我更新了我的答案，尽管你可能是对的，当时可能d3 zoom不支持这些东西，或者至少在文档现在有一些新的东西可用，所以我把它们添加到这个答案中。希望他们能帮忙@八月这对我来说很有效，顺便问一下，我怎样才能在鼠标滚轮事件上上下滚动？