Disable the overlap of nodes

Question

I have created visualisation using vis-network, the problem is that the nodes are overlapping one on top of the other.

I have tried changing different values of nodeSpacing till 1000, that didn't help Also i have tried setting barnesHut.avoidOverlap to 1 and that didn't help either,

any suggestions to fix this will be highly appreciated.

Updated options object

    var options = {
        interaction: {
            hover: true
        },
        manipulation: {
          enabled: true,
        },
        layout: {
            hierarchical: {
              direction: "LR",
              shakeTowards: "leaves",
              nodeSpacing: 1000,
              treeSpacing: 300,
            },
        },
        physics: {
            stabilization: {
                enabled: true, // <------ Disables animation.
                iterations: 4000
            },
            barnesHut: {
                avoidOverlap: 1
            }
        }
    };

user_1620449 · Answer

As mentioned in the documentation here for the layout.hierarchical.nodeSpacing option:

This is only for the initial layout. If you enable physics, the node distance there will be the effective node distance.

Therefore nodeSpacing isn't the final distance when physics is enabled. Two possible options are described below with examples.

nodeSpacing with Physics Disabled

The nodeSpacing option could be used with physics disabled. With physics disabled edges will likely overlap nodes when there are a large number of nodes. An example of this can be seen at https://jsfiddle.net/pbx8m9sk/.

nodeDistance with Hierarchical Repulsion Solver

As mentioned in the solver section of the documentation here the hierarchical repulsion solver is used by default when using a hierarchical layout. When the hierarchicalRepulsion solver is used the nodeDistance option can be used to control the distance between the nodes.

For example:

var options = {
  physics: {
    hierarchicalRepulsion: {
      nodeDistance: 300,
    }
  }
};

Snippet using hierarchical repulsion solver with node distance set is below. You would likely want to adjust the nodeDistance and could adjust other hierarchicalRepulsion options, depending on the data.

// Setup initial nodes / edges
const nodes = [
  {id: 1, label: '1'},
  {id: 2, label: '2'},
  {id: 3, label: '3'},
  {id: 4, label: '4'},
  {id: 5, label: '5'},
  {id: 6, label: '6'},
  {id: 7, label: '7'},
  {id: 8, label: '8'},
  {id: 9, label: '9'},
  {id: 10, label: '10'},
  {id: 11, label: '11'},
];
const edges = [
 {from: 1, to: 2},
 {from: 2, to: 3},
 {from: 2, to: 4},
 {from: 2, to: 5},
 {from: 2, to: 6},
 {from: 2, to: 7},
 {from: 2, to: 8},
 {from: 2, to: 9},
 {from: 2, to: 10},
 {from: 2, to: 11},
];

// Add a number nodes / edges
const nodesToAdd = 200;
for (let i = 12; i < 12 + nodesToAdd; i++){
  nodes.push({id: i, label: `${i}`});
  edges.push({from: 11, to: i});
}

var data = {
  nodes: nodes,
  edges: edges,
};
// create a network
var container = document.getElementById("mynetwork");
var options = {
  interaction: {
    hover: true
  },
  manipulation: {
    enabled: true
  },
  nodes: {
    shape: 'dot',
  },

  layout: {
    hierarchical: { },
  },
  physics: {
    hierarchicalRepulsion: {
      nodeDistance: 300,
    }
  },
       
};
var network = new vis.Network(container, data, options);

#mynetwork {
  width: 100%;
  height: 170px;
  border: 1px solid lightgray;
}

Disable the overlap of nodes

1 Answers

nodeSpacing with Physics Disabled

nodeDistance with Hierarchical Repulsion Solver