无法在 Ionic V5 App 上禁用 d3 topojson 底图缩放

Posted 2023-03-28

【中文标题】无法在 Ionic V5 App 上禁用 d3 topojson 底图缩放

【英文标题】：Cannot disable d3 topojson base map zooming on Ionic V5 App

【发布时间】：2020-07-20 11:55:39

【问题描述】：

我正在尝试使我的应用程序上的 d3 拓扑图的缩放功能更流畅。默认的缩放行为有点滞后，而且大多与离子触摸事件冲突。我正在尝试完全禁用所有默认缩放功能，并将尝试使用放大/缩小按钮来完成。但似乎我无法禁用缩放。

这是我的标记

这是我的地图代码...

虽然我不能在地图上捏缩放，但似乎我可以通过捏地图外的白色区域来缩放 svg。我想完全禁用捏缩放，因此用户无法使用触摸进行缩放。

【问题讨论】：

我认为你可以在地图上方放置一个div，并给这个div一个透明的背景，所以当用户触摸div时它不会生效，因为它是div而不是地图，然后您可以使用 2 个按钮放大/缩小进行缩放

我认为它不会起作用，因为

直到现在我还没有明白 svg 的意义，但是尝试一下，如果它不起作用，那么告诉我什么是 svg lol。

你知道吗？它工作.. SVG 基本上是 d3 地图容器:) LOL。现在让我尝试调用 d3 缩放事件 :) 谢谢！

是的，当我告诉你制作一个新地图时，我是否按照你将地图命名为 svg 的方式工作，但在你告诉我如何处理 svg 之后，我认为它不是地图。 ^_^。我将其添加为答案还是您仍有疑问？

【参考方案1】：

您可以在地图上方放置一个 div，并为该 div 赋予透明背景，并将其高度和宽度设置为地图大小，因此当用户触摸该 div 时，它不会产生任何效果，因为它是 div 而不是地图，然后您可以使用 2 个按钮（放大/缩小）进行缩放。