Search code examples
javascriptvis.jsvis.js-network

Vis.js: Lessen layout noise for multiple central nodes (radial force)

I'm working with vis.js to display some graphs. The problem is that layouts with multiple central nodes get noisy (the central nodes' neighbours overlap). A layout similar to the attached image is desirable. Is it possible to achieve this using vis.js?

enter image description here

Solution

  • Looks like there is an option that should solve your issue (I've found it after playing with physicsConfiguration like I suggested earlier):

    physics has avoidOverlap property (float between 0 and 1) that can be used like this:

    var options = {
  ...
  physics: {
    barnesHut: {
      avoidOverlap: 0.5
    },
    ...
  }
}

    If you try it in the configuration demo, you'll see that with avoidOverlap equal to 0 it's quite possible to drag and move nodes so that those overlap edges and the network stays in that position:

    enter image description here

    but once we increase this value, nodes start to be bounced from edges and can't really stay in that position:

    enter image description here

    Note though, that this option doesn't prevent edge-edge crossing, only edge-node overlapping (see physics/barnesHut/avoidOverlap). The physics docs page doesn't contain the word "cross" at all and each occurance of "overlap" is about edge-node thing.

    So this will make the layout less noisy, but won't eliminate crossed edges.