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?

Calculable

Hello @Eric, The VisJS network graph you're referring to is just a PNG image of the VisJS architecture. – Phrensy

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.

Pronoun

@RyanShillington unlike the border in the link, is is possible to create borders around the group of nodes? For example All group 1 nodes in once circle and all group 2 in one circle. Its OK to have edges across the group. I am looking to generate something like desired output in the SO question I posted – Southpaw

@Southpaw I made this work for us with a bunch of custom code. I laid out the general idea of how to do it in this Github enhancement request here, if you read my first post and then my second one: github.com/visjs/vis-network/issues/203#issuecomment-571164712 – Throne