Prasita Mukherjee Prasita Mukherjee -4 years ago 186
Javascript Question

Set default scale in vis js network

I am using vis.js library to create a network topology. After I create the network using :

network = new vis.Network(container, data, options);


where container is the
canvas
on which I am drawing.

data :

{
nodes: Nodes,
edges: Edges
};


options :

{

autoResize: true,
nodes: {
shape: 'image',
size: 25,
font: {
size: 16,
color: 'darkbrown'

},
borderWidth: 0,
shadow: true
},
edges: {
smooth: {
forceDirection: "none"
}
},
physics: {
forceAtlas2Based: {
springLength: 80,
springConstant: 0.27
},
minVelocity: 0.75,
solver: "forceAtlas2Based",
timestep: 0.34
},
layout: {
randomSeed: undefined
},
interaction: {
hover: true
}
}


After it is drawn the default scale(1) is very large with respect to my canvas. I want to resize the scale. I have tried this way :

network = new vis.Network(container, data, options); //network is drawn

var scaleOption = { scale : 0.5 }; -(1)

network.moveTo(scaleOption); -(2)


It doesn't work this way. However, if (1) and (2) are fired inside a particular event say :

network.on("click",function(params) {

var scaleOption = { scale : 0.5 };

network.moveTo(scaleOption);
});


It works. I need to set the scale right at the beginning, i.e. right after topology is drawn(before the occurence of any such event).
AfterDrawing
event is continuously fired after the topology is drawn, so that fails too. Any way to resolve this?

Answer Source

Use stabilized event and once method to scale down your network for the first time it is drawn.

network.once('stabilized', function() {
    var scaleOption = { scale : 0.5 };
    network.moveTo(scaleOption);
})
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download