almende / vis

⚠️ This project is not maintained anymore! Please go to https://github.com/visjs
7.86k stars 1.48k forks source link

Grouping network nodes with overlay boxes #2139

Open TheoAndersen opened 7 years ago

TheoAndersen commented 7 years ago

I'm just looking at vis, which seems to be a great, really simple too use framework for diagramming.

In the diagramming type I'm trying to make, i need a way create several groups on a set of nodes, where the groupings might overlap nodes.

The best way to visualize this would be some sort of box grouping, with a slightly transparent background.

The only sort of grouping I've been able to find, involved using similar colored nodes, but is there way way to create a sort of group-nodes, which contains other nodes?

It could look something like the mocked up image below? (ideally the node background color shouldn't be affected by the grouping background color)

vis_with_boxed_groupings
abcbaby commented 7 years ago

If you are looking to drawing (for box grouping) or highlighting on the vis.js network, you can probably read this issue so it will get you some idea of how to do it: https://github.com/almende/vis/issues/977

TheoAndersen commented 7 years ago

Actually I'm looking for physical grouping of elements, so that they will stay inside a drawed box (not just highlighting).

I mean as being able to define a group/box programmatically, which would give a box that always would keep node x and y inside it.

But I've been thinking that maybe i should just make it an option to just redraw the network, only showing the grouping (simplified network) - that might also be good enough

mojoaxel commented 7 years ago

This functionality is not there yet. Let's call it a feature-request and see if somebody will pick it up...

m1rc0 commented 7 years ago

Hi there,

I need a similar functionality. I want to use it to organize the view of a logical energy grid.

Greetings

wimrijnders commented 7 years ago

I will interpret that as a request to keep this issue active. OK, done.

m1rc0 commented 7 years ago

@wimrijnders Thank you very much. If I can help in any way, please let me know.

wimrijnders commented 7 years ago

Help is very very much appreciated. I'm totally swamped with issues for network, I'm the only one at the moment actively working with this code.

If you can, how about looking in the code to get an idea how to implement this?

arunkumarpro1 commented 6 years ago

@TheoAndersen Were you able to complete the above feature? I got a similar requirement. It would be great if you could give some idea about the implementation.

pgsoub commented 5 years ago

is it still not available?

maxcmoi89 commented 5 years ago

I am very much interested by this feature too

JasperPan commented 5 years ago

looking forward to this feature

Vincent-CIRCL commented 5 years ago

I'm also interested in this feature. I may have some workaround ideas on how to handle this, however. Has someone already implemented such feature ? :)

Vincent-CIRCL commented 5 years ago

If you want a similiar feature as requested by OP, you may look there. I implemented a similar idea : https://github.com/Vincent-CIRCL/visjs_classificator/commit/73d7b73db0f5b667e3bfd3eff99cd357d468fad5

image