D3禁用Pan&滚动时缩放

问题描述

我已经渲染了一个启用了平移和缩放的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.filter .对于与触摸相关的事件，它们还支持 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

选择 .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&滚动时缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！