Can we use Yfiles with cytoscape.js to render orthogonal edges. My layout is a preset layout of compound nodes. I want the child nodes of the compound node to connect via orthogonal edges to other nodes.
I actually don't know what you mean with "yfiles with cytoscape.js". But if you want to do orthogonal edges with cytoscape.js maybe have a look here.
If this doesn't answer your question maybe give some example.
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
I would like to have edges that are straight with right angles, similar to the family tree layout mentioned here: Styling edges in Cytoscape.js for a Family Tree
I've also attached an image showing what I would like to achieve.
In the link above they mention hyperedges, and changing the curve-style to "segments". I've done that, but there are only 2 segments and they do not form a right angle. There are some attributes that can be set for the segments, but I have not figured out how to make them work. Any help would be appreciated.
You have to calculate the points where the lines should be bent and set the segment style properties appropriately.
If you want an alternative way of specifying bent edges, you could investigate zigzag edges: https://github.com/cytoscape/cytoscape.js/issues/882
Due to the nodes and edges between nodes, the breadthfirst algorithm is positioning nodes in such a way that labels on the nodes are overlapping one another. Is it possible to have the algorithm either position the nodes or the edge labels so they don't overlap, or attempt to minimize overlap?
You may be interested in label autorotation for edges, planned for 2.4 and implemented in unstable. As for the logic you'd like in the layout itself, it may be a too tight coupling of implied rendering behaviour to the layout. Whereas things like node.outerHeight() can be taken into consideration directly and explicitly in layouts, this would rely on the layout assuming certain rendering behaviour.
I think there's a factor option for spacing the nodes farther apart in the breadthfirst layout, and if you want to discuss other new ideas like it I would be happy to discuss it in a ticket in the tracker.
Thanks
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?