如何防止Mousewheel事件的默认操作

Question

我正在构建d3.js条形图，通过将svg元素固定为固定宽度并将其高度封装在具有溢出属性的较小div内，使我可以在x轴上滚动。 该可视化文件是在处理数据的平台上构建的，并提供了一个JavaScript代码编辑器来创建可视化文件。 发布代码后，条形图将在html div元素中呈现。

条形图呈现的页面具有默认的缩放事件，该事件在您使用鼠标滚轮时触发。 由于我想使用鼠标滚轮滚动条形图，因此尝试通过在代码中包含以下语句来阻止触发默认的缩放操作：

$(vizhtmlelement).mousewheel(function() {
    return false;
});

这可以成功删除缩放功能，但同时也无法使用鼠标滚轮进行滚动。 有什么方法可以阻止鼠标滚轮缩放同时将鼠标滚轮保持在可视化状态？

Answer 1

在.call（）缩放功能的任何元素上，都需要将其鼠标滚轮行为设置为null。 因此，如果您从或ID为“ yourElement”的.call（zoom）看起来像这样：

d3.select("#yourElement")
.call(myZoom)
.on("dblclick.zoom", null)
.on("mousewheel.zoom", null)
.on("DOMMouseScroll.zoom",null);

注意，我也禁用了双击缩放，因为您可能也希望禁用它。