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.
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 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.
Situation:
I have a graph with 500 nodes (say 1000 edges), with a root.
Goal:
I want the user able to progress in the graph, by cliking on nodes, showing the edges and new nodes around.
Way I do for now:
I first load all elements in memory (the entire json), then use ele.remove() for each nodes/edges. And just keep visible the root and around.
Question 1)
Is there any solution to choose the element to display at startup.(and not removing them later)
Question 3)
Removing the element does not free memory. Is there a solution to use memory for only elements that are not removed ?
Question 2)
Are there a smarter/better approach to do the trick ?
Thanks a lot
Using classes with visibility-related properties, as mentioned, would work.
You can also animate elements and animate the viewport to highlight parts of the graph.
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.