Search code examples
vis.jsvis.js-network

Can I set multiple physics?


Is there a way to define different physics for different sets of edges?

What I want to achieve, is to pull nodes together, who are in the same cluster, and to push those nodes away, who have a different cluster.

At the moment I define the physics in options:

const options = {
  physics: {
    enabled: true,
    barnesHut: {
      gravitationalConstant: -80000, 
      springConstant: 0.001, 
      springLength: 200,
      centralGravity: 0,
    },
  },
};

Solution

  • While reading the documentation, I figured out that there is no way to set different physics.

    But there is a way to deactivate the physics for specific nodes or edges.

    Therefore you have to override the global options for the nodes/ edges. This can be achieved by defining the options in the node/edge itself.

     var nodes = new vis.DataSet([
        { id: 1, label: "Node 1" },
        { id: 2, label: "Node 2" },
        { id: 3, label: "Node 3" },
        { id: 4, label: "Node 4" },
        { id: 5, label: "Node 5" }
      ]);
    
      // create an array with edges
      var edges = new vis.DataSet([
        { from: 1, to: 3, physics: false },
        { from: 1, to: 2, physics: false },
        { from: 2, to: 4 },
        { from: 2, to: 5 },
        { from: 3, to: 3 }
      ]);
    
      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        physics: {
          enabled: true,
        }
      };
    
      var network = new vis.Network(container, data, options);
    

    In this example, the edges [from 1 to 3] and [from 1 to 2] are overriding the global physics options and therefore they don't act as springs.