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.

Answer 1

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.

Answer 2

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"
  }
}