How to avoid network graph nodes overlapping?

Question

I was using Visjs and displaying rectanglar nodes with text. Some of the nodes can have a couple of lines of text so I added a heuristic algorithm to work out roughly where the line breaks should go to avoid very wide, single line chunks of text in very wide but very short nodes.

The trouble is, even with physics turned on, I still get overlapping nodes.

Is it possible to tell the layout engine that, under no circumstances (or physics models), should any two nodes overlap?

Ambi

Answer 1

Well, check out the physics configuration example: as you can see, barnesHut solver has avoidOverlap property which prevents overlapping even when springConstant is equal to zero. Try this:

var options = {
  "physics": {
    "barnesHut": {
      "springConstant": 0,
      "avoidOverlap": 0.2
    }
  }
}

and tweak the constants to fit your needs (the example linked above is useful for that).

From its documentation:

Accepted range: [0 .. 1]. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.

To be noted, though: I've seen a recommendation to start with low values of avoidOverlap (like 0.1) to simplify the task for the solver. I can't recall where exactly I've read this.

Mohammedmohammedan

But is this just 'general avoidance' or does it take account of the varying size of each node in a scenario where nodes can vary greatly in width/height? – Ambi

@Ambi actually, this is exactly for taking into account the varying size of each node: check out visjs.org/docs/network/physics.html , barnesHut.avoidOverlap reads "When larger than 0, the size of the node is taken into account." – Mohammedmohammedan

@Ambi to be noted, though: I've seen a recomendation to start with low values of avoidOverlap (like 0.1) to simplify the task for the solver. I can't recall where exactly I've read this. – Mohammedmohammedan

@orenrevenge it's rather unclear what you mean and whether you're asking for help. Theoretically, this can give somewhat unexpected results if the nodes are too close before physics is switched on, but again, "destroys" is too unclear to speculate – Mohammedmohammedan

Answer 2

I used levelSeparation to adjust the horizontal node distance, and nodeDistance to adjust the vertical node distance:

const options = {
  layout: {
    hierarchical: {
      direction: 'LR',
      sortMethod: 'directed',
      levelSeparation: 300,
    },
  },
  physics: {
    hierarchicalRepulsion: {
      nodeDistance: 140,
    },
  },
  ...
}

Underweight

Answer 3

According to documentation repulsion is controlled by nodes mass option.

const options: Options = {
  nodes: {
    shape: 'box',
    mass: 4
  }
}

The barnesHut physics model (which is enabled by default) is based on an inverted gravity model. By increasing the mass of a node, you increase it's repulsion.

Values between 0 and 1 are not recommended. Negative or zero values are not allowed. These will generate a console error and will be set to 1.

Saturation