Question

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

当窗口滚动时，有没有办法临时禁用d3.zoom？

我已经看到了使用按钮切换缩放/平移的方法，如下所示：http://jsfiddle.net/0xncswrk/，但我想知道是否可以在不添加按钮的情况下实现。这是我目前的缩放逻辑。

谢谢！

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');

Answer 1

编辑：哇老回答但从未看过你的评论。对于那个很抱歉。对不起，我忘了考虑移动缩放。

在文档中，这可能是新的，但他们建议您使用zoom.filter更精细地控制允许的缩放比例。对于与触摸相关的活动，他们也支持zoom.touchable。

如d3-zoom文档

中所述

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

选择       .CALL（放大）       .on（“wheel.zoom”，null）;

你也可以考虑将scaleExtent设置为[1,1]，特别是如果它只是暂时的，那么它只能将缩放锁定到一个可能的比例，但最好选择文档所说的内容：P

Answer 2

来到这里是因为我正在处理类似的问题。也许对于此后的任何人来说，处理此问题的一种简单方法可能是使用 filter() 实例提供的 zoom() 方法。这将允许您在应用或完全忽略缩放事件之间切换。它比暂时将 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
    });

文档：https://github.com/d3/d3-zoom#zoom_filter

D3禁用pan＆amp;滚动

2 个答案: