Question

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

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

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

但这并不理想。它要求用户滚动到页面底部以访问缩放控件。此外，我想要一个更多访问缩放功能（是的，我知道，我只是关闭了更容易访问的缩放功能）。 Vis timeline diagrams似乎有比network diagrams更多缩放方法。

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

Answer 1

我认为没有一些针对特定网络的解决方案。您必须检测鼠标滚动并相应地处理它，如下所示：

<script src="/js/87540e8_script_1.js"></script>

对于支持旧版浏览器，您需要should use container.addEventListener("wheel", function(e){ if (e.stopPropagation) e.stopPropagation(); return false; })和DOMMouseScroll个事件。

不幸的是，我手边没有鼠标，所以无法真正为你测试，但这里有一个游乐场，你可以自己动手：https://jsfiddle.net/9m433scr/8/

Answer 2

捏缩放功能是在车轮侦听器中处理的，可以使用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);
    };
}

配置可见网络图只能缩放而不是鼠标滚动

2 个答案: