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?
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 how to control the sequence in which the edges are rendered between two nodes in a multigraph? I need a way how to tell the renderer that the edges should be rendered in a particular order between two nodes, let's say I want first render the edges from node_1 to node_2 and then the edges from node_2 to node_1 so the picture is more readable (it's quite important in my use case). It would be also great to have the possibility to sort them by a property stored on edge.
Add the elements in the order you want them.
I'm trying to build a descending graph in Cytoscape. I've got the majority done quite well, but now I'm stuck on the edge types. I'd like to use something like the 'segments' curve-style, where my edges have points.
However, instead of being zig-zags, I would like the edges to be constrained to horizontal/vertical lines.
My graph is pretty constrained and the user cannot manipulate the positions. I would like the edges to start at the 'parent' element, go straight down a set amount, then hit a point, turn, head horizontally to the same X as the child, then straight down to the child element.
Right now, the lines go straight, and I can add segments easily, but they aren't constrained and are based on percentages that I won't have access to without doing a bunch of math, which I guess isn't terrible.
Current:
Desired:
If you want specific absolute positions on segments edges, you'll need to convert the absolute co-ordinates to the relative co-ordinates that you specify for segments edges.
If you want a different type of edges for your usecase, feel free to propose it in the issue tracker.
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.
I noticed that when connecting multiple edges to a single (rectangle-shaped) vertex, the positions where they connect are evenly distributed across the side of the vertex. Is there a way to change this behavior? I'm using mxHierarchicalLayout.
In my graph, I want the edges to be as straight as possible (but only horizontal and vertical). This is what I currently have:
For example, why is edge "G" slightly bend? I'd like it to go in a straight horizontal line from "PIC" to "W4". Ideally, I'd like to change a setting per-vertex that sets the edge connecting behavior to "connect where you like", and let the layouting figure out the best spot where the edge makes the least corners.
I know I can set "exitX/Y" and "entryX/Y", but this would require me to calculate these values and the whole layouting process manually. I'm looking for a better way to achieve this.
You can have a try with Orthogonal edgestyle.
Map<String, Object> EdgeStyle = graph.getStylesheet().getDefaultEdgeStyle();
EdgeStyle.put(mxConstants.STYLE_EDGE, mxEdgeStyle.OrthConnector);
EdgeStyle.put(mxConstants.STYLE_STROKECOLOR, "red");
EdgeStyle.put(mxConstants.STYLE_STROKEWIDTH, 2);
This will make your edges to be like the ones below. I think it should work without the ports too.
Do not forget to enable edge style in the layout.
layout.setDisableEdgeStyle(false);