How do you stop the nodes from wobbling into place in a vis js network graph?

user_13674468 0
Viewed 373

When a network graph is normally rendered using the vis js network, when you have lots of nodes, the nodes move around like crazy before snapping into position and resting. Is there a setting to stop this from happening and only render the final position of the nodes once all the physics has taken place?

vis.js reactjs graph networking javascript
2 Answers

The option for this is named stabilization and the options can be seen in the documentation at https://visjs.github.io/vis-network/docs/network/physics.html. Once enabled you can configure the iterations dependent on the complexity, or leave it at the default of 1000.

var options = {
  physics: {
    stabilization: {
      enabled: true,
      iterations: 100
    }
  }
};

The best vis-network example of this is the 'loading bar' example here (jsfiddle) which has stabilization and uses the stabilizationProgress event to update a loading bar. Having a loading bar prevents displaying a blank canvas whilst nodes are stabilized.

user_16204490

You can simply disable the physics on the graph being rendered. It's explained in the documentation. Options would look like this:

const options = {
  physics: {
    enabled: false
  }
}

Hope it works for you

user_106057420
Related