使用Vis js提供的事件监听器,捕获鼠标滑轮和Shift键事件,在限制缩放倍数的前提下,更新网络图的缩放比例。具体代码实现如下:
var container = document.getElementById('mynetwork');
// create a network
var data = {
nodes: nodes,
edges: edges
};
var options = {};
var network = new vis.Network(container, data, options);
// add event listener
container.addEventListener('wheel', function (e) {
var scale = network.getScale();
var newScale = scale + (e.deltaY > 0 ? -0.05 : 0.05);
// limit zoom range
if (newScale < 0.6 || newScale > 1.4) {
return;
}
network.moveTo({scale: newScale});
});
container.addEventListener('keydown', function (e) {
if (e.shiftKey) {
container.addEventListener('wheel', function (e) {
e.preventDefault();
var scale = network.getScale();
var newScale = scale + (e.deltaY > 0 ? -0.05 : 0.05);
// limit zoom range
if (newScale < 0.6 || newScale > 1.4) {
return;
}
// update network zoom
network.moveTo({scale: newScale});
});
}
});
container.addEventListener('keyup', function (e) {
if (e.shiftKey) {
container.removeEventListener('wheel', function (e) {});
}
});