Question

所以我在缩放功能中有一个if语句，用于检测是否按下了Ctrl键（或Meta键）以便使用鼠标滚轮进行缩放。

如果未按下Ctrl / Meta键，则仅使用pan。如果按下Ctrl / Meta键，请使用平移和缩放。

我非常接近解决方案，但下面有一个问题。以下相关代码：

var zoomListener = d3.zoom()
    .scaleExtent([1 / 3, 1])
    .on("zoom", zoom);

var svg = d3.select("#tree-container").append("svg")
    .attr("width", width)
    .attr("height", height)
    .call(zoomListener);

var group = svg.append("g");

var zoomKey = false;

$(document).keydown(function(e) {
  if (e.ctrlKey || e.metaKey) {
    zoomKey = true;
    console.log(zoomKey);
  }
}).keyup(function(e) {
    zoomKey = false;
    console.log(zoomKey);
});

function zoom() {
  if (zoomKey) {
    // svg.on("wheel.zoom");
    group.attr("transform", d3.event.transform);
  } else {
    svg.on("wheel.zoom", null);
    group.attr("transform", d3.event.transform);
  }
}

所以我的问题是，我有：

svg.on("wheel.zoom", null);

如何重置或将其恢复为默认值？是否有svg.off？我试图找到关于事件监听器的第二个参数的具体文档，但是找不到它。

还尝试过：

svg.on("wheel.zoom", true);

感谢所有知道的人。

Answer 1

使用zoom.filter()。最后读到这样的内容：

var zoomListener = d3.zoom()
    .scaleExtent([1 / 3, 1])
    .on("zoom", zoom)
    .filter(function() {
        // Exclude wheel event unless zoomKey is set
        return zoomKey || !(d3.event.type === "wheel");
    });

// no changes here  

function zoom() {
    // No condition needed in here anymore
    group.attr("transform", d3.event.transform);
}

在“.on（”wheel.zoom“，null）之后恢复鼠标滚轮缩放功能”

1 个答案: