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.
Related
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.
So I've been giving Cytoscape a try recently. My project's goal is basically a collaborative graph that people will be able to add/remove nodes to/from, making it grow in the process. The graph will include many compound nodes.
Most of the examples I've seen use container div that takes 100% of the screen space. This is fine for "controlled" graphs but won't work in my case because its size is intended to be dynamic.
Here's a JSFiddle using the circle layout within a fixed 3000px/3000px container:
https://jsfiddle.net/Jeto143/zj8ed82a/5/
Is there any way to have the container size be dynamic as opposed to stating it explicitly? Or do I have to compute the new optimal container size each time somehow, and then call cy.resize()?
edit: actually, using 100%/100% into cy.fit() might just work no matter how large the network is gonna be, so please ignore this question is this is the case.
Is there a recommended layout for displaying large/unknown amounts of data in a non-hierarchical way that would "smartly" place nodes (including compound ones) in the most efficient way possible, all the while avoiding any overlap? (I guess that's a lot to ask...)
Why doesn't cy.fit() seem to be working in my example? I'm using it both at graph initialization and when CTRL+clicking nodes (to show closed neighborhood), but it doesn't seem to like the 3000x3000px container (seems better with 100%x100%).
edit: also ignore this question if you ignored 1., as again it seems fine with 100%/100%.
Any help/suggestions would be greatly appreciated.
Thank you very much in advance.
TLDR: It's (1).
Cytoscape has a pannable viewport, like a map. You can define the dimensions of the viewport (div) in CSS. What's displayed in the viewport is a function of the positions of the nodes, the zoom level, and the pan level -- just like what is visible in a map's viewport is a function of zoom, pan, and positions of points of interest.
So either you have to
(a) rethink your UI in terms of zoom and pan and use those in-built facilities in Cytoscape, or
(b) disable zoom and pan in Cytoscape (probably stay at (0, 0) at zoom 1) and let the user scroll the page as you add content to the graph and resize its container div to accommodate the new content.
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'));
I'm trying to figure out a style/selector that could be applied globally to make edges draw on-top-of compound nodes using cytoscape.js. I understand the value of having regular nodes always on-top-of edges but was wondering if there is a way to work around this with compound nodes?
Edges connecting to, from, or inside compound nodes are drawn on top of the associated compound nodes. Unrelated edges are drawn behind, as usual. You can control draw order with z-index, but those values are used relatively according to the hierarchy created by the previous rules.
It sounds like your graph has nodes placed too closely together. Have you tried adjusting the CoSE layout options for your graph?
I have a kind a graph, I found it while googling "tree graph" though it doesn't look like a normal tree-graph. So I was wondering, is it also just called a "tree-graph" or has it a more specific name? I want to look up more info about them, though can't really search for it without a proper name.
Thanks a lot!
PS. I'm not sure if this is the correct place to ask this, if it's not, please direct me to the proper place. Thanks.
Google calls it a Treemap and provides several examples and an ontology. They define the treemap as follows:
A visual representation of a data tree, where each node can have zero or more children, and one parent (except for the root, which has no parents). Each node is displayed as a rectangle, sized and colored according to values that you assign. Sizes and colors are valued relative to all other nodes in the graph.
Source: Google Developers / Google Charts
It's typically called a "heat map" or "heat chart".
That's a Treemap:
Treemaps display hierarchical (tree-structured) data as a set of
nested rectangles. Each branch of the tree is given a rectangle, which
is then tiled with smaller rectangles representing sub-branches. A
leaf node's rectangle has an area proportional to a specified
dimension on the data. Often the leaf nodes are colored to show a
separate dimension of the data.