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
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.
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.
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.
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 was looking through my .xcdatamodel and I noticed that there was an arrow that doesn't seem to represent anything(I can't post images so here's an example behind a link):
http://s1.postimage.org/2ufcjo0jo/Screen_shot_2011_05_01_at_8_16_14_PM.png
What does this represent? Thanks in advance.
Those arrows mean that one entity is a child of another. It goes from the child entity to the parent entity.