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?

score 10 · Accepted Answer · edited Dec 15 '21 at 16:49

10

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.

edited Dec 15 '21 at 16:49

Ooker

1,969
4
28
58

answered May 28 '18 at 18:09

YakovL

7,557
12
62
102

1

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? – Volksman May 29 '18 at 18:31
1

@Volksman actually, this is exactly for taking into account the varying size of each node: check out http://visjs.org/docs/network/physics.html , `barnesHut.avoidOverlap` reads "When larger than 0, the size of the node is taken into account." – YakovL May 29 '18 at 19:58
@Volksman 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. – YakovL May 29 '18 at 20:03
this destroys the whole graph – oren revenge Jan 26 '22 at 11:16
@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 – YakovL Jan 26 '22 at 13:24

score 2 · Answer 2 · edited Jul 30 '21 at 08:21

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,
    },
  },
  ...
}

edited Jul 30 '21 at 08:21

Wenfang Du

8,804
9
59
90

answered Jan 19 '18 at 12:44

Axel

31
4

How to avoid network graph nodes overlapping?

2 Answers2