我一直在搞弄D3JS源代码。我要实现的是,如果也按了CTRL,则仅允许使用“滚动”(就像Google Maps)进行缩放。我一直在弄乱完整的D3:
https://d3js.org/d3.v4.js
我试图在16556行附近实现这一点:
function wheeled() {
if (!filter.apply(this, arguments)) return;
if (event.ctrlKey == false) return; //This is the new line I added
.....
//else if ((t.k === k)) return; //I commented out this line
其他一切都完好无损。我下载了此文件,并经历了以下示例:https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
在Chrome浏览器中,它运行良好。一切都按预期进行,但是当我尝试在Firefox中按Ctrl + Scroll时,它只会放大整个页面。 Firefox说:
ReferenceError: event is not defined[Learn More] d3.v4.js:16558:1
wheeled http://127.0.0.1:8887/d3.v4.js:16558:1
contextListener/<
最佳答案
我偶然发现了相同的问题,但不想更改d3源文件。然后,我仅通过有条件地调用原始车轮处理程序(使用D3v4)解决了该问题:
this.zoom = d3.zoom()[...]
var svg = d3.select(this.$refs.chart)
.call(this.zoom);
var wheeled = svg.on("wheel.zoom");
svg
.on("wheel.zoom", function () {
if (d3.event.ctrlKey) {
wheeled.call(this);
// prevent browser zooming at minimum zoom
d3.event.preventDefault();
d3.event.stopImmediatePropagation();
}
});