Bordered group of nodes in a network graph?

Question

I am attempting to implement a network graph using Vis JS library and would like to implement a group of nodes that are inside a logical group (box). VisJS allows grouping of nodes but is not implemented in a visual way that I am looking for.

Another library that executes this perfectly is GoJS: http://gojs.net/latest/samples/basic.html Another example from VisJS that shows network graph I would like to implement, but no example in documentation: http://visjs.org/docs/img/vis_overview.png

I would like to have nodes placed into larger boxes to represent the group of nodes.

Any ideas or suggestions for implementing this?

Answer 1

I'm the developer of the network module of vis. Our apologies for not seeing this issue sooner, but most of our communication is done through GitHub.

On the upside, since the release of v4 we support render events. You can use these to draw whatever you want on the canvas, including borders behind groups of nodes. Take a look at the example:

https://visjs.github.io/vis-network/examples/network/events/renderEvents.html

Keep in mind that this is aesthetic only. The physics engine will not compartmentalise these boundaries so the nodes may interact with the others.

We often hear this request from people who want to use vis network as a flow editor. Even though this is not your issue Id like to point out that this is not what we designed the network for. We may have a module for this in the future though.