Connected nodes overlapping other edges or nodes

Question

I'm using vis.js to display nodes, not all nodes are connected to each other, but they are overlapping as shown in the picture, is there a way with the option to avoid this, I went through the configure options but could not find.

Reiner · Answer 1 · 2016-05-23T10:02:26.700

10

There is an attribute avoidOverlap=[0,1] in some physics like BarnesHut http://visjs.org/docs/network/physics.html?#

You can try it here at the bottom under physics http://visjs.org/examples/network/other/configuration.html

like adding this attribute into your physics option

var options = {
 ... "physics": {
    "barnesHut": {
      "avoidOverlap": 1
    },
  }
}

edited May 23 '16 at 10:02

answered May 23 '16 at 09:42

Reiner

1,621
1
16
22

I must have to many nodes because they all start dancing and moving around and never settle. – Donny V. Feb 27 '18 at 20:09
4

Don't start with 1. Try .1 and slowly work your way up. I have a lot of nodes, so 1 made them dance around and not stop. – Donny V. Feb 27 '18 at 20:18

score 4 · Answer 2 · answered Feb 23 '17 at 14:51

I managed to get it working by using the configure option:

configure: {
        enabled: true,
        showButton: true
}

This shows you a modal to configure all the options until the graph looks nice.

In my case with hierarchical view, I had to disable physics and set the layout like this:

layout: {
  hierarchical: {
    enabled: true,
    nodeSpacing: 425,
    blockShifting: false,
    edgeMinimization: false,
    sortMethod: "directed"
  }
}

score 2 · Accepted Answer · answered Aug 14 '17 at 14:04

2

I would recommend using manual configuration for physics and layout:

configure: {
  enabled: true,
  filter: 'physics, layout',
  showButton: true
}

and try to play with nodeDistance and nodeSpacing.

answered Aug 14 '17 at 14:04

Andrej Hucko

510
1
5
15

score 0 · Answer 4 · edited Feb 12 '23 at 16:25

I tried a lot of options on this and figured out that it actually it depends on the physics configuration: if your physics configuration is like this

physics: false, then you can use just this
layout: {
   hierarchical: {
      levelSeparation: 150,
      treeSpacing: 200,
      blockShifting: true,
      edgeMinimization: true,
      parentCentralization: true,
      direction: 'UD',
      nodeSpacing: 300,
      sortMethod: "directed" //directed,hubsize 
   }
},

Where nodeSpacing is the key for you and sord method will define the structure for you This make up a network like this:

otherwise use manual configuration:

configure: {
   enabled: true,
   filter: 'physics, layout',
   showButton: true
}

Connected nodes overlapping other edges or nodes

4 Answers4