將D3.js從鼠標滾輪變爲控制+鼠標滾輪

Question

從this question我知道如何在D3.js中禁用鼠標滾輪縮放功能。我如何將其重新映射到按住控制按鈕並加上鼠標滾輪？謝謝。

Answer 1

我找到了一個不需要修改D3.js源代碼的解決方案。

我根據我對這個問題的解決方案：How to temporarily disable the zooming in d3.js

而是點擊一個按鈕來啓用/禁用變焦，我用的keydown/KEYUP事件：

svg.call(zoom = d3.behavior.zoom().on('zoom', redrawOnZoom)).on('dblclick.zoom', null); 

var zooming = false; 

function redrawOnZoom() { 
    if (zooming) { 
    svgContainer.attr('transform', 'translate(' + zoom.translate() + ')' + ' scale(' + zoom.scale() + ')'); 
    } 
}; 

d3.select("body").on("keydown", function() { 
    zooming = d3.event.ctrlKey; 
}); 

d3.select("body").on("keyup", function() { 
    zooming = false; 
}); 

這是一個完整的小提琴：https://jsfiddle.net/tabacof/dcbor8eL/3/

Answer 2

將過濾器功能添加到縮放處理程序（https://github.com/d3/d3-zoom#zoom_filter）。

在d3.event中，元素ctrlKey（https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey）指示控制鍵是否被按下。

在過濾函數中返回false會忽略該事件。

zoom.filter(function() { 
    return d3.event.ctrlKey; 
});