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

Question

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

score 28 · Accepted Answer · edited Jul 17 '17 at 17:36

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

Where exactly should the "stabilizationIterationsDone" be defined? — NSP, Dec 13 '17 at 13:19
Works a treat however the arrows don't get moved to the nearest edge. Any idea how to allow this to occur after moving a box? — Stefan Collier, Feb 21 '19 at 14:56
On moving the nodes around, it's not smooth, it's laggy. Any idea how to fix that? — Ashutosh Tiwari, Feb 04 '22 at 11:51

score 4 · Answer 2 · answered Sep 07 '15 at 08:20

4

I suppose you first want to let the network stabilize and only then disable physics? In that case you can load the Network with physics and stabilization enabled. Once the nodes are stabilized, the stabilized event is fired. Then you can disable the physics via network.setOptions

answered Sep 07 '15 at 08:20

Jos de Jong

6,602
3
38
58

1

Thank you so much for your response. I have read this on the vis.js github site. I can't seem to get the syntax correct would you mind providing an example? – Perry Sep 08 '15 at 13:54
On moving the nodes around, it's not smooth, it's laggy. Any idea how to fix that? – Ashutosh Tiwari Feb 04 '22 at 11:51

score 4 · Answer 3 · edited Nov 24 '17 at 13:43

I was able to figure this out and the code now looks like this

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

    nodes: {
      borderWidth:1,
      size:45,
      color: {
        border: '#222222',
        background: 'grey'
      },
      font:{color:'black',
       size: 11,
       face :'arial',
       },
    },

    edges: {

        arrows: {
            to:     {enabled: false, scaleFactor:1},
            middle: {enabled: false, scaleFactor:1},
            from:   {enabled: false, scaleFactor:1}
        },
        color: {
            color:'#848484',
            highlight:'#848484',
            hover: '#848484',
        },
        font: {
            color: '#343434',
            size: 11, // px
            face: 'arial',
            background: 'none',
            strokeWidth: 5, // px
            strokeColor: '#ffffff',
            align:'vertical'
        },
        smooth: {
            enabled: false, //setting to true enables curved lines
            //type: "dynamic",
            //roundness: 0.5
        },
    }
};

network = new vis.Network(container, data, options);
    network.setOptions({
            physics: {enabled:false}
    });
}

I had to move the network.setOptions() as shown in the new code and it is now working as desired.

On moving the nodes around, it's not smooth, it's laggy. Any idea how to fix that? — Ashutosh Tiwari, Feb 04 '22 at 11:51

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

3 Answers3

Linked