Perry Perry - 4 months ago 111
Javascript Question

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

Answer

After some more wok and help from the VIS.js developer here is the completed code, minus the json data

 // 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',
        },



    },
    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
        }

    },

    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: 'middle'
        },
        smooth: {
            enabled: false, //setting to true enables curved lines
            //type: "dynamic",
            //roundness: 0.5
        },


    }


};

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

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