Search code examples
javascriptvis.jsvisnetwork

Disable the overlap of nodes

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

overlapping nodes

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
            }
        }
    };
Solution

  • 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;
}
    <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>