I'm using Cytoscape.js to visualize a large, nested data structure. Showing the whole graph directly makes it hard to interpret, so I'm only showing the top-level nodes at first. Then, when a node is clicked, I want to show the subgraph within the node.
My first attempt was to just add the subgraph as child nodes. The child nodes initially have visibility: hidden, but are shown once their parent node has been selected (the parent node itself also changes its appearance a bit when this happens, to indicate it has received the focus). This works, somewhat. However, the top-level nodes are drawn very large, obviously since they now contain their hidden child nodes.
So my alternative solution would be to dynamically add the child nodes at the moment when their parent receives focus. However, this would probably require some additional restrictions on Cytoscape, as I don't want the parent node to grow or move when this happens. So basically the node bounds of the parent becomes the canvas in which the child graph should be drawn.
My double questions is then (1) whether Cytoscape can actually introduce such constraints, and (2) if this is really the best solution for this particular problem.
Related
I am using Cytoscape Dagre extension to show hierarchical graph from left to right.
It has 14 children and one parent 1 and main parent. All children are connected to parent 1 but whenever I use draw a graph using dagre extension, it seems like children are connected between each other. They do not have any edges between them but Dagre still shows that. Is Cytoscape with Dagre capable of showing hierarchical graphs with multiple children?
Here is the stackblitz example: https://stackblitz.com/edit/dagre-childrenconnected
Your edges overlap with your child nodes, that is not a dagre specific problem, your cytoscape-stylesheet is just missing some parameters. With taxi edges, the important thing to understand is, that your edges follow style rules like the layout algorithm you use. For layouts, you use the layout option to specify how the layout should place the nodes. The edges are styled via the stylesheet and they all have some options to play around with.
In your case, you should take a look at this section in the docs. There you can find options like the taxi-direction:
"taxi-direction": "rightward",
With this option, your edges will fit your layout a bit more. In your case, you didn't specify a direction, so taxi edges use the auto option as a default value, which automatically uses vertical or horizontal starting directions, based on whether the vertical or horizontal distance is largest. In your case, the vertical ones triggered resulting in overlapping nodes.
Is there a way in Cytoscape.js to connect two parent nodes to a child node like the example in the picture?
Sorry if the question is something very basic but I couldn't find it in the documentation (maybe I have missed it).
All I could do was to create an edge between one parent and the child and another edge between the other parent and the child, which looks kind of messy and won't help me in the visualization of a family tree.
Use segments edges to draw edges made of multiple straight lines: http://js.cytoscape.org/#style/segments-edges
How can I make the "container" nodes in a Cytoscape Compound Graph smaller? The "cose" layout makes them gigantic for my graph, wasting an extreme amount of space. How can I "style" such container nodes to be a more reasonable size for the "child" nodes contained within it?
The size of compound parent nodes is a function of the position and dimensions of its child nodes. Thus, you can control parent node size via layout. You can try experimenting with the parameters of the existing layouts or you can even write your own.
In general, you have to experiment with the parameters of a layout to get the visual results you want. It can not be done automatically on the layout side.
Situation:
I have a graph with 500 nodes (say 1000 edges), with a root.
Goal:
I want the user able to progress in the graph, by cliking on nodes, showing the edges and new nodes around.
Way I do for now:
I first load all elements in memory (the entire json), then use ele.remove() for each nodes/edges. And just keep visible the root and around.
Question 1)
Is there any solution to choose the element to display at startup.(and not removing them later)
Question 3)
Removing the element does not free memory. Is there a solution to use memory for only elements that are not removed ?
Question 2)
Are there a smarter/better approach to do the trick ?
Thanks a lot
Using classes with visibility-related properties, as mentioned, would work.
You can also animate elements and animate the viewport to highlight parts of the graph.
I'm using Cytoscape JS to create a network. This is a large network and I need to hide some nodes to be more readable, but I can't redraw my network not including the hiding nodes.
How can I redraw using auto-layout after hiding some nodes?
It's not clear to me exactly what you mean. An example would probably help. There are different semantics for hidden versus removed elements, and it sounds like perhaps you want the elements removed.
I ended up solving similar problem by just having two instances of Cytoscape.js on a page. First is headless one (invisible, with no HTML-representation) that stores all data I have. Second one is visible and has a subset of objects I want to be visible and layouted at the moment.
Copying elements between instances is extremely easy, like:
cy.add(datacy.$('#elem1'));