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

Share Improve this question Follow edited Feb 16, 2018 at 10:00 YakovL 8,3751313 gold badges7373 silver badges113113 bronze badges asked Mar 21, 2017 at 7:24 Prasita MukherjeePrasita Mukherjee 10122 silver badges99 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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