Javascript v4中的d3.js缩放传播：当一个手指位于子元素上时，收缩缩放贴图

我有一张交互式地图，其中以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>

这样，如果用户不小心用一个手指在一个圆圈或感兴趣的地方缩放，圆圈将亮显，缩放将取消。阅读讨论以及来自同一讨论的内容，对我建立这一体系有很好的帮助

因此，只要用户在缩放时避开感兴趣的地方，缩放就会起作用

然而，我真正想做的是将其设置为另一种方式，并始终将缩放放在第一位

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

目前，我通过将感兴趣的地方缩小到比我想要的小，这样我就可以增加用户仅在地图上缩放的机会。这当然是次优的

---

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

这是我的风滚草徽章。我最终解决了这个问题，用canvas构建了所有的圆。带有d3缩放的svg地图，但带有画布圆圈。如果您有一个d3元素，将一个手指放在该元素上，另一个手指放在地图上，并尝试捏缩缩放，则无法工作。使用画布和指针跟踪解决了这个问题

这是完成的地图和项目

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