vis.js - 配置可见网络图以仅在捏合时缩放而不是在鼠标滚动时缩放

Question

我有一个由 vis.js 创建的大型网络图，它在浏览器中的宽度为 100% 并且非常高，因此需要向下滚动页面才能看到所有内容 - 我希望我的页面能够像世界上大多数其他网页一样运行 - 但是vis.js 在我滚动时缩放，而不是滚动页面。如何关闭滚动缩放但仍然允许它说，捏(或按住键 + 滚动)？

当然我可以使用此选项关闭缩放 - 并添加一些内置缩放按钮:

var options = {
  interaction: {
    zoomView: false,
    navigationButtons: true,
  }
};

但这并不理想。它要求用户滚动到页面底部以访问缩放控件。另外，我想要一个更容易访问的缩放功能(是的，我知道，我刚刚关闭了那个更容易访问的缩放功能)。可见 timeline diagrams似乎比 network diagrams 有更多的重新缩放方法.

总结一下:我希望为图表禁用鼠标滚轮/触控板滚动，从而提供自然的整个页面滚动行为，加上捏(或按住键+滚动)进行缩放。

Answer 1

双指缩放功能在 onwheel 监听器中处理，可以使用 ctrlKey 属性进行检测。您可以使用自己的处理程序覆盖处理程序，如果未检测到夹点，则立即返回，否则照常执行。

this.network = container ? new Network(container, data, options) : {};
const { interactionHandler } = this.network;
if (interactionHandler) {
    interactionHandler.body.eventListeners.onMouseWheel = (event) => {
        if (!event.ctrlKey) return; // ctrlKey detects a max touchpad pinch in onwheel event
        interactionHandler.onMouseWheel(event);
    };
}