I want to set the color of all edges that are attached to a selected node, so that each time a user selects a node any edges that the node is either a source or target of will be a different color. What would the selector look like for this, or is it not possible?
You can't just use a selector, because you need a small graph traversal in addition to the initial filter, e.g.: cy.$('node:selected').neighborhood('edge'); i.e. for selected nodes get all connected edges
Or cy.$('node:selected').connectedEdges()
Related
I see cytoscape.js has support for an overlay, but could not find any way on how to draw a similar shape, but one which is behind the node body, instead of on top of it.
Overlay:
My use case is basically to have something that does not darken the node body when the node is active. Can we somehow manipulate the z-index of the overlay, so that it is shown below the node?
I am using cytoscape.js to draw a graph. I give the library a graph object and run the dagre layout for the graph. Then I manually position cytoscape node elements, which act as buttons, on each graph node. This lays out fine. Image is attached below.
However, when I drag a node around, the connected graph nodes become 'foregrounded' and are drawn on top of the 'buttons' that I have positioned on top of each node.
I have tried to manually set the z-indexes of each of these 'button' nodes to a very high value (Number.MAX_SAFE_INTEGER) and also setting the z-index of the connected graph nodes to a very low value, but the graph nodes still clip through and are drawn on top of the 'button' nodes for the duration of the drag.
How can I prevent the nodes graph nodes from overlapping/being drawn on top of the nodes that I manually placed?
How it should look:
The red/green/black bars and arrows are nodes that are drawn on top of the base graph node
How it looks on drag - not desired:
The connected nodes (violet colored nodes) are covering the 'button' nodes
I have a really huge network. In my webapp, I want to be able to select nodes and edges then I change the style to selected stylesheet. I have succeed with this but the problem is the edges always behind another nodes because it is too crowded. Is it possible to make all selected nodes and edges to be in the foreground? I knwo about z-index but it seems it can not set selected nodes and edges to the foreground.
See the visibility style properties: http://js.cytoscape.org/#style/visibility
From the docs:
z-compound-depth : May be bottom, orphan, auto (default), or top. The first drawn is bottom, the second is orphan, which is the same depth as the root of the compound graph, followed by the default of auto which draws in depth order from root to leaves of the compound graph. The last drawn is top.
z-index-compare: May be auto (default) or manual. The auto setting draws edges under nodes, whereas manual ignores this convention and draws solely based on the z-index value.
z-index : An integer value that affects the relative draw order of elements. In general, an element with a higher z-index will be drawn on top of an element with a lower z-index within the same depth.
So, you need to set at least z-index-compare: manual and z-index if you generally want edges over nodes.
Used cytoscape.js to draw a graph using compound nodes. Need to position the inside node (i.e. child) to specific position of compound node (e.g. left, right, top, bottom, etc.). Is there any way to do this?
This feature is planned for 2.4: https://github.com/cytoscape/cytoscape.js/issues/530
When I first populate a graph, all the nodes appear stacked on the top-left corner. When I invoke applyLayout() on the graph, the nodes move to the appropriate location with a nice animation. However, after I change the graph (remove some nodes, adds others) and invoke applyLayout() again, all the nodes move to their appropriate location, but they start at the top-left corner again.
Is there a way to make the nodes move from their current location to the new one, without having them reset to the top-left?
I don't think there is a way. However, in the latest version of Zest (see GEF 4 Update Sites), animation is disabled by default. This should at least result in the new layout appearing in the correct place directly.