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

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

• javascript
• node.js
• vis.js
• vis.js-network

3 Answers 3

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

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

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.