D3禁用Pan&滚动时缩放 [英] D3 disable pan & zoom when scrolling

问题描述

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

I've rendered a d3 map that has pan and zoom enabled, but when scrolling down the viewport either on desktop or mobile, the window gets stuck zooming in the map.

在窗口滚动时，是否可以暂时禁用d3.zoom?

Is there a way to temporarily disable d3.zoom, while the window is scrolling?

我已经看到了使用按钮切换缩放/平移的方法，如下所示: http://jsfiddle. net/0xncswrk/，但是我想知道是否有可能无需添加按钮.这是我当前的缩放逻辑.

I've seen ways of toggling the zoom/pan using a button as seen here: http://jsfiddle.net/0xncswrk/, but I wanted to know if it's possible without having to add a button. Here's my current zoom logic.

谢谢！

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

推荐答案

原来的答案令人赞叹，但从未看到您的评论.对于那个很抱歉.是的，对不起，我忘记了考虑移动缩放.

Wow old answer but never saw your comment. Sorry about that. Yeah sorry I forgot to consider mobile zooming.

在文档中，也许这是新的，但是他们建议通过使用 zoom.touchable .

In the documentation, perhaps this is new, but they recommend having more granular control of what zoom you allow by using zoom.filter. For touch related events, they also support zoom.touchable.

d3-zoom 文档中指定的

As specified in the d3-zoom documentation

要仅禁用滚轮驱动的缩放(例如不干扰本机滚动)，可以在将缩放行为应用于所选内容后删除缩放行为的滚轮事件监听器:

To disable just wheel-driven zooming (say to not interfere with native scrolling), you can remove the zoom behavior’s wheel event listener after applying the zoom behavior to the selection:

选择 .call(缩放) .on("wheel.zoom"，null);

selection .call(zoom) .on("wheel.zoom", null);

您也可以考虑将scaleExtent设置为[1,1]，特别是如果它只是临时的，因此它只能将缩放锁定到一个可能的比例，但是最好选择文档中所说的:P

You can also consider just setting the scaleExtent to be [1,1] especially if it's just temporary so it locks the zoom to only one possible scale but preferably you opt for what the documentation says :P

这篇关于D3禁用Pan&滚动时缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！