Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 664
Perry Avatar asked Sep 04 '15 17:09

Perry


Video Answer


2 Answers

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 } );
});
like image 94
Perry Avatar answered Sep 28 '22 08:09

Perry


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

like image 32
Jos de Jong Avatar answered Sep 28 '22 06:09

Jos de Jong