我正在使用d3.zoomBehavior在Map上启用平移和缩放。它运行良好。我还编写了代码来将Map重新置于焦点项目的中心,这也是有效的。如果用户手动缩放或平移(检查Map控件是否“脏”),我希望禁用这种“自动重新置中”。
如何访问用户手动移动Map时的事件?
我已尝试访问拖动、滚轮和缩放事件:
d3.select("svg").call(this.zoomBehavior).on("wheel", () => {
console.log("user has zoomed with wheel"); // never gets called
}).on("drag", () => {
console.log("user has panned map"); // never gets called
}).on("zoom", () => {
console.log("zoom event"); // gets called even when the map is autofocusing -- not what I need.
});
我可以绑定选择上的哪些事件来确定用户何时操作缩放和平移?
2条答案
按热度按时间wwwo4jvm1#
在zoomed函数中,检查是否定义了
d3.event.sourceEvent
。由selection.call(zoom.transform,someZoomTransform)
触发的缩放具有为空的sourceEvent。此外,sourceEvent.type
还可以提供有关事件类型的附加信息(例如:滚轮、鼠标移动)。这是Bostock的brush and zoom example中使用的方法。手动刷动触发缩放的编程更新,手动缩放触发画笔的编程更新:该示例需要检测什么是手动缩放/画笔还是编程缩放/画笔以避免无限循环。
下面是一个程序化的缩放应用于svg(覆盖了代码片段预览窗口),但是你也可以平移/缩放。通过检查sourceEvent是否为空,我们可以看到缩放是由用户启动的还是由程序启动的:
第一个
gcuhipw92#
您可以检查此条件