禁用缩放但在 foreignObject 上检索滚动

Question

我正在使用 d3.js + AngularJS 来创建一棵树。
树是可缩放的，这是我通过执行以下操作实现的行为（如文档中所推荐的那样 - 请注意我使用的是 v3：https://devdocs.io/d3~3/zoom-behavior.md#zoom）：

let zoom = d3.behavior.zoom()
    .scaleExtent([.5, 2])
    .on("zoom", function() {
        svg.attr("transform",  "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
    });

svg = d3.select(".tree-div")
    .append("svg")
    .call(zoom)
    .append("g");

最近，我在树的节点上添加了工具提示。工具提示在 Angular 指令中生成。

d3.selectAll(".tree-node").append("g")
    .classed("tree-node-tooltip", true)
    .call(function() {
         $compile(this[0])($scope);
    });

这些工具提示由条形图 + 应该是可滚动的 foreignObject 组成 div。但是我从来没有设法让 foreignObject 放弃缩放行为并检索滚动行为。

我看到了一些说明类似问题的帖子，但我找到的 none 解决方案对我有用。我尝试了以下方法：

直接在工具提示上禁用缩放

使用多种：

.("zoom", null)
.(".zoom", null)
.("wheel.zoom", null)
.("mousewhell.zoom", null)

在 .attr("classed", "tree-node-tooltip") 之后。缩放行为保持不变。

在缩放处理程序上过滤

.on("zoom", function() {
    if (mouse is over tooltip) {
        return;
    }
    svg.attr("transform",  "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
});

这会禁用缩放，但也会禁用本机滚动。

我也尝试停止传播事件（在 zoom、zoomstart 上），没有效果（缩放仍然存在）。

你知道我该怎么做吗？我完全被困在这里。任何帮助将不胜感激，谢谢。

Answer 1

您可以在 D3 选择上添加侦听器，这样您就可以停止事件传播：

d3
 .selectAll(...)
 .call(...)
 .on("wheel", 
    function() { 
        d3.event.stopPropagation();
    })

禁用缩放但在 foreignObject 上检索滚动

Disable zoom but retrieve scroll on foreignObject

d3.js

angularjs-directive

直接在工具提示上禁用缩放

在缩放处理程序上过滤