D3 滚动时禁用平移和缩放

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

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

\n\n

在文档中，这也许是新的，但他们建议使用Zoom.filter更精细地控制允许的缩放。对于触摸相关事件，它们还支持Zoom.touchable。

\n\n

如d3-zoom文档中指定

\n\n

\n

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

\n\n

选择\n .call(zoom)\n .on("wheel.zoom", null);

\n

\n\n

您也可以考虑将其设置scaleExtent为[1,1]是如果它只是临时的，则它将缩放锁定为仅一种可能的比例，但最好选择文档中所述的内容：P

\n