1

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.

newbie
  • 530
  • 1
  • 9
  • 36

1 Answers1

2

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.

superkeci
  • 151
  • 2
  • 3
  • Thank you so much but can you please explain a little that what you did and how it fixed the issue? – newbie Nov 03 '20 at 14:08
  • 1
    Your spring lengths were too short and they were too sturdy, which I think caused that stabilization problem in the first place. I made them a little bit relaxed. Then, decreased the gravitational constant by -100 to make your nodes to be pushed away from the center. Lastly, doubled the central gravity to pull them together. – superkeci Nov 07 '20 at 17:43
  • Is it possible that we create a network graph with 10 nodes and then on clicking a button add 10 extra nodes to the relevant parent nodes? – newbie Nov 11 '20 at 14:19
  • Yes, just add new nodes and edges and call update method of DataSet instances for both nodes and edges. – superkeci Nov 17 '20 at 13:51
  • I am sorry can you please elaborate it a little. – newbie Nov 18 '20 at 20:28
  • 1
    I preferred to update your fiddle to show you how to do that. There are comments in JS part and you can follow them to understand the details. Have fun! https://jsfiddle.net/3vhg69ac/ – superkeci Nov 23 '20 at 15:30
  • I am sorry for being late but I can't thank you enough sir for your help and time. Thank you so much. If you don't mind, can I please add you on LinkedIn? – newbie Nov 30 '20 at 23:53
  • You're welcome, and of course: https://www.linkedin.com/in/caner-elci-60a5284 (I hope it's allowed to share such information as a comment here) – superkeci Dec 01 '20 at 15:16