v4 中的 d3.js 缩放传播：当一根手指在子元素上方时，捏缩放地图答案

【问题标题】：d3.js zoom propagation in v4: pinch zooming a map when one finger is over a child elementv4 中的 d3.js 缩放传播：当一根手指在子元素上方时，捏缩放地图
【发布时间】：2017-11-28 23:25:19
【问题描述】：

我有一个交互式地图，其中的景点以 svg 圆圈表示。每个圆圈都有一个 touchstart 或 mousedown 事件，后面的透明矩形绑定到 d3.zoom() 以便您可以放大地图！如果您要检查元素，则设置如下：

<div id="map">
    <svg>
        <g><rect></rect></g> <!-- transparent rect bound to d3.zoom() -->
        <g>
            <circle></circle> <!-- places of interest with touchstart listeners -->
            <circle></circle>
            ...
        </g>
    </svg>
</div>

现在，如果我捏缩放，而我的一个胖手指碰巧在其中一个圆圈上，那么缩放在我的手机上的行为会很奇怪，除非我阻止在像这样触摸一个圆圈时发生缩放：

  selection.append("circle").on("touchstart mousedown",function(d,i){
       d3.event.preventDefault(); // no zoom for you
       // ... code to highlight circle or whatever 
  }

这样，如果用户不小心用一根手指在一个圆圈或感兴趣的地方进行缩放，圆圈会突出显示并取消缩放。从同一讨论中阅读this 讨论和issue 66 对我的设置很有帮助。

如果用户在缩放时避开感兴趣的地方，那么缩放就可以工作。

然而，我真正想做的是反过来设置，并始终让缩放优先。

我尝试将圆圈放在缩放矩形后面，但当然圆圈不再接收触摸事件。这很不幸，因为当您无法再与感兴趣的地点互动时，地图会完美缩放。

目前，我将感兴趣的地点设置得比我想要的要小，这样我就可以增加用户只放大地图的机会。这当然是次优的。

也许有一天我会对触摸事件有一个直观的了解，但现在我很谦虚地问如何处理这个问题，因为我迷路了。任何关于如何为我的地图优先放大 touchstart 的建议将不胜感激。感谢您的阅读。

【问题讨论】：

标签： javascript android ios d3.js touch

【解决方案1】：

所以这让我得到了我的风滚草徽章。我最终通过使用画布构建所有圆圈来解决这个问题。具有 d3 缩放的 svg 地图，但带有画布圆圈。如果您有一个 d3 元素，并且您将一根手指放在元素上，另一根手指放在地图上并尝试捏缩放它将不起作用。使用画布和指针跟踪可以解决这个问题。

这是完成的地图和项目https://pixelsandplans.com/live/flow/

【讨论】：