Stop vis.js physics after nodes load but allow drag-able nodes

Perry picture Perry · Sep 4, 2015 · Viewed 11.8k times · Source

I am trying to draw a vis.js network diagram and have vis load and position the nodes. I then want the physics to be disabled so the nodes can be moved by the user. I have tried this but it is not working.

var options = {

    nodes: {
      borderWidth:4,
      size:60,
      color: {
        border: '#222222',
        background: 'grey'
      },
      font:{color:'black'}
    },
    edges: {
      arrows: {
        to:     {enabled: false, scaleFactor:1},
        middle: {enabled: false, scaleFactor:1},
        from:   {enabled: false, scaleFactor:1}
      },
      color: 'black'
    },

    { physics: enabled: false; };

Has anyone done this? if so can you provide an example or advice on best way to accomplish this. I have also read the explanation located here, but not being too familiar with java I can't figure the steps out.

Thanks

Answer

Perry picture Perry · Sep 11, 2015

After some more work and help from the vis.js developer here is the completed code, minus the json data and some options. The trick is to use the "stabilizationIterationsDone" event and disable physics:

 // create a network
var container = document.getElementById('mynetwork');
var data = {
    nodes: nodes,
    edges: edges
};
var options = {

    nodes: ...,
    edges: ...,

    physics: {
        forceAtlas2Based: {
            gravitationalConstant: -26,
            centralGravity: 0.005,
            springLength: 230,
            springConstant: 0.18,
            avoidOverlap: 1.5
        },
        maxVelocity: 146,
        solver: 'forceAtlas2Based',
        timestep: 0.35,
        stabilization: {
            enabled: true,
            iterations: 1000,
            updateInterval: 25
        }
    }
};

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

network.on("stabilizationIterationsDone", function () {
    network.setOptions( { physics: false } );
});