search

visjs / vis-network

:dizzy: Display dynamic, automatically organised, customizable network views.
https://visjs.github.io/vis-network/
Apache License 2.0
3.09k stars 374 forks source link

Are nested nodes possible? #136

Open bel0v opened 5 years ago

bel0v commented 5 years ago

Hey! I wonder if it is yet possible to visualize a "part-of" relation by nesting nodes within nodes like asked in this old thread: https://github.com/almende/vis/issues/3293

Back then there was no straight way to do that, but maybe that's changed now? How would you advise to approach it? My first thought is generating a sort of svg representing inner nodes, but that looks quite hacky and low level from the first sight.

Thomaash commented 5 years ago

Hi,

I'm afraid there's no simple way to do this. What comes to my mind is manually positioning and sizing the nodes so that it appears correct (even though there's no connection between them) or rendering the outer nodes manually to the canvas using rendering events. Depending what exactly you want to achieve (an image would help) I may come up with more concrete advice.

bel0v commented 5 years ago

The main idea is that I want to visualize different types of relations. Here, a thick arrow( ⇒) is a "part-of" relation, thin arrow (→) is another one (say "has-a") and a dashed line (┇) is a third one.

Screenshot 2019-09-20 at 22 29 25 Screenshot 2019-09-20 at 22 29 29

^ these are two ways of representing the same thing. I.e. I want to be able to represent the "part-of" relation in two ways. While there's no problem in creating the first one, I wonder how to achieve the second.

Then, here's how it could look like in some context (I have a third relation for an example)

Screenshot 2019-09-20 at 22 30 19

-- Another thought I have is: say we have (2) -> (3). Then we do not render the (1) node, but rather render a "pseudo-node" as a round border around 2 and 3. This is like a "closer look" at (1). Then for a birds-eye view we only render (1) and hide (2) and (3). The last picture could also be represented that way by drawing such borders around 2,3 and 5,6

I hope I made it clear (I tried my best :) )

TonyLuo commented 2 years ago

@Thomaash hey, any update on this issue?

TonyLuo commented 2 years ago

https://g6.antv.vision/en/docs/manual/middle/elements/combos/defaultCombo G6 combo has similar feature, but unfortunately it has overlap issue

nileshtrivedi commented 1 year ago

Nested nodes (i.e. Compound graphs) would be an awesome feature to have. Most real-world graphs tend to have this nested strcture. While CytoscapeJS supports rendering of such graphs, there are not many visual editors for graphs with this structure.

I ended up creating a tool for this before I discovered PRSM or vis-network.