如何限制 vis.js 网络的缩放？

Question

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

//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);

多次执行缩小操作网络消失。有没有限制缩放级别的功能？

Answer 1

由于 vis.js 的网络中没有 zoomMax 功能，我为您编写了一些代码来使此功能正常工作，我编写了一些基本逻辑来帮助您解决问题。

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/

希望对您有所帮助。

Answer 2

你可以使用这个代码更好，因为当你达到缩放限制时你永远不会去网络中间：

//NetWork on Zoom
network.on("zoom",function(){
   pos = [];
   pos = network.getViewPosition();

   if(network.getScale() <= 0.49 )
   {

    network.moveTo({
        position: {x:pos.x, y:pos.y},
        scale: 0.49,
      });
   }
   if(network.getScale() >= 2.00 ){

        network.moveTo({
        position: {x:pos.x, y:pos.y},
        scale: 2.00,
      });
    }
  });

Answer 3

这是一个保留最后一个位置的版本，以防止在达到最大范围时出现烦人的跳跃或慢摇。

let MIN_ZOOM = 0.5
let MAX_ZOOM = 2.0
let lastZoomPosition = {x:0, y:0}
network.on("zoom",function(params){
    let scale = network.getScale()
    if(scale <= MIN_ZOOM )
    {
        network.moveTo({
            position: lastZoomPosition,
            scale: MIN_ZOOM
        });
    }
    else if(scale >= MAX_ZOOM ){
        network.moveTo({
            position: lastZoomPosition,
            scale: MAX_ZOOM,
       });
     }
     else{
        lastZoomPosition = network.getViewPosition()
     }
});
network.on("dragEnd",function(params){
    lastZoomPosition = network.getViewPosition()
});

不过，一旦解决了以下问题，它就会变得多余： https://github.com/visjs/vis-network/issues/574

如何限制 vis.js 网络的缩放？

How to limit zooming of a vis.js network?

javascript

vis.js

vis.js-network