VisJS Network Graph not stabilizing and moving in circle

1.8k views Asked by At

I am trying to create a network graph using visjs but the problem is it works for one set of nodes and edges but doesn't work for the other.

The data (nodes and edges) can vary so is there a way I can provide a generic settings?

As in the given example the graph keeps on moving in a circle and takes forever to stabilize. Can anyone please help me fix this issue?

Example: https://jsfiddle.net/aqarain92/eL1qt58r/16/

I am using the following options

const options = {
      nodes: {
        shape: "dot",
        scaling: {
          min: 3,
          max: 70
        }
      },
      edges: {
        arrows: { to: { enabled: false } },
        width: 1,
        color: {
          color: 'gray',
          highlight: 'black'
        },
        smooth: { type: "continuous", roundness: 0 }
      },
      groups: {
        authentic: { color: 'blue' },
        inauthentic: { color: 'purple' },
        parent: { color: 'black' }
      },
      layout: { improvedLayout: false },
      physics: {
        forceAtlas2Based: {
          gravitationalConstant: -26,
          centralGravity: 0.005,
          springLength: 100,
          springConstant: 0.04
        },
        maxVelocity: 146,
        solver: "forceAtlas2Based",
        timestep: 0.35,
        stabilization: { iterations: 200 }
      },
      interaction: {
        tooltipDelay: 200,
        hideEdgesOnDrag: true,
        hideEdgesOnZoom: true
      }
    };

The same options work for different set of nodes and edges.

1

There are 1 answers

8
superkeci On BEST ANSWER

If it's not too late, here is the stabilized version of your network:

https://jsfiddle.net/8nowe7c4/

I changed your options a little bit:

const options = {
  nodes: {
    shape: "dot",
    scaling: {
      min: 3,
      max: 70
    }
  },
  edges: {
    arrows: { to: { enabled: false } },
    width: 1,
    color: {
      color: 'gray',
      highlight: 'black'
    },
    smooth: { type: "continuous", roundness: 0 }
  },
  groups: {
    authentic: { color: 'blue' },
    inauthentic: { color: 'purple' },
    parent: { color: 'black' }
  },
  layout: { improvedLayout: false },
  physics: {
    forceAtlas2Based: {
      gravitationalConstant: -126,
      springLength: 200,
      springConstant: 0.01
    },
    maxVelocity: 50,
    solver: "forceAtlas2Based",
    timestep: 0.35,
    stabilization: true
  },
  interaction: {
    tooltipDelay: 200,
    hideEdgesOnDrag: true,
    hideEdgesOnZoom: true
  }
};

You may tune the parameters for your needs.