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?

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?

• javascript
• canvas
• vis.js-network
• vis.js

1 Answer 1

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