I'm using cytoscape.js for a project. Is there a way to implement contextual Zoom on nodes and compound nodes using the existing cytoscape.js library or any other cytoscape compatible plugin?
I want to achieve this using Cytoscape: https://codesandbox.io/s/22107q?file=/App.js&from-sandpack=true
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.
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've got a working cytoscape.js instance that looks like this:
I have been trying unsuccessfully to configure the graph so that the node labels don't overlap. The graph uses arbor for layout. Playing with the repulsion levels doesn't have much effect on the problem. Gravity (or lack thereof) doesn't either. Is this a layout issue or a cytoscape.js config issue and how do I fix it?
Secondarily, node shape is supposed to be a 40x40 ellipse, which it generally is. But when a node is grabbed, it displays as a rounded rectangle. Why?
I've created a gist with my javascript and some data. It's dependent on jQuery (~2.1), cytoscape.js (>=2.3.9) and arbor.js as provided in the cytoscape.js lib directory. And it needs <div id="cy"></div> for a target.
(1) Overlap is a function of layout. If changing layout parameters is unsuccessful for your usecase, a different layout is probably the solution.
(2) That's the overlay -- not the node's body.
I am trying to implement some visualizations using Mondrian in Pharo 3.0.
My main problem is that I do not find a way to dynamically update the Mondrian view: I am able to remove nodes doing
view removeAllEdgesTo: node;
removeNode: node.
but I am not able to add nodes, change the layout and so on. I can change the nodes and edges, but the view does not seem to be refreshed.
Another thing I want to do is the following: I have the user dynamically choose a subset of nodes and a color, and I would like to be able to change the color of these nodes.
Is there a way to interact with Mondrian views outside the builtin interactions?
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?