Question

94

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

rated 0 times [ 99] [ 5] / answers: 1 / hits: 15944 / 9 Years ago, fri, september 4, 2015, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hallie

Add To Favorites

Follow

Total Points: 503

Total Questions: 114

Total Answers: 103

Location: Iraq

Member since Fri, Jun 5, 2020

4 Years ago

hallie questions

1 Uncaught TypeError: Cannot read properties of undefined (reading 'navigate')

Fri, Jan 28, 22, 00:00, 2 Years ago

1 isSameOrBefore implementation for date-fns

Fri, Jul 9, 21, 00:00, 3 Years ago

1 Module build failed when using mini-css-extract-plugin with postcss-loader for less

Thu, May 27, 21, 00:00, 3 Years ago

1 d3.js in Angular - Property 'event' does not exist on type 'typeof import

Wed, Nov 11, 20, 00:00, 4 Years ago

1 Uncaught SyntaxError: Unexpected token '< ' VueJS PWA

Fri, Mar 27, 20, 00:00, 4 Years ago

View All

answered 9 Years ago brookelynshaem · Accepted Answer

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

});