如何限制vis.js网络的缩放? [英] How to limit zooming of a vis.js network?

问题描述

我已经使用vis.js实现了一个简单的网络.这是我的代码:

I've implemented a simple network using vis.js. Here's my code:

//create an array of nodes
var nodes = [
    {
        id: "1",
        label: "item1"
    },
    {
        id: "2",
        label: "item2"
    },
    {
        id: "3",
        label: "item3"
    },
];

// create an array with edges
var edges = [
    {
        from: "1",
        to: "2",
        label: "relation-1",
        arrows: "from"
    },
    {
        from: "1",
        to: "3",
        label: "relation-2",
        arrows: "to"
    },
];

// create a network
var container = document.getElementById('mynetwork');

// provide the data in the vis format
var data = {
    nodes: nodes,
    edges: edges
};
var options = {};

// initialize your network!
var network = new vis.Network(container, data, options);

多次执行缩小操作时，网络消失.有限制缩放水平的功能吗?

On performing the zoom-out operation multiple times the network disappears. Are there any functions to limit the zooming level?

推荐答案

由于vis.js网络中没有zoomMax函数，因此我为您编写了一些代码以使该功能正常工作，我编写了一些基本的逻辑来帮助您.

I wrote you some code to get this function working since there is no zoomMax function within the network of vis.js, I wrote some basic logic to help you out.

var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var afterzoomlimit = { //here we are setting the zoom limit to move to 
    scale: 0.49,
}

var options = {}; 

var network = new vis.Network(container, data, options);
network.on("zoom",function(){ //while zooming 
    if(network.getScale() <= 0.49 )//the limit you want to stop at
    {
        network.moveTo(afterzoomlimit); //set this limit so it stops zooming out here
    } 
});

这是一个jsfiddle: https://jsfiddle.net/styb8u9o/

Here is a jsfiddle: https://jsfiddle.net/styb8u9o/

希望这对您有所帮助.

Hope this helps you.

这篇关于如何限制vis.js网络的缩放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！