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);
Related
So I've been giving Cytoscape a try recently. My project's goal is basically a collaborative graph that people will be able to add/remove nodes to/from, making it grow in the process. The graph will include many compound nodes.
Most of the examples I've seen use container div that takes 100% of the screen space. This is fine for "controlled" graphs but won't work in my case because its size is intended to be dynamic.
Here's a JSFiddle using the circle layout within a fixed 3000px/3000px container:
https://jsfiddle.net/Jeto143/zj8ed82a/5/
Is there any way to have the container size be dynamic as opposed to stating it explicitly? Or do I have to compute the new optimal container size each time somehow, and then call cy.resize()?
edit: actually, using 100%/100% into cy.fit() might just work no matter how large the network is gonna be, so please ignore this question is this is the case.
Is there a recommended layout for displaying large/unknown amounts of data in a non-hierarchical way that would "smartly" place nodes (including compound ones) in the most efficient way possible, all the while avoiding any overlap? (I guess that's a lot to ask...)
Why doesn't cy.fit() seem to be working in my example? I'm using it both at graph initialization and when CTRL+clicking nodes (to show closed neighborhood), but it doesn't seem to like the 3000x3000px container (seems better with 100%x100%).
edit: also ignore this question if you ignored 1., as again it seems fine with 100%/100%.
Any help/suggestions would be greatly appreciated.
Thank you very much in advance.
TLDR: It's (1).
Cytoscape has a pannable viewport, like a map. You can define the dimensions of the viewport (div) in CSS. What's displayed in the viewport is a function of the positions of the nodes, the zoom level, and the pan level -- just like what is visible in a map's viewport is a function of zoom, pan, and positions of points of interest.
So either you have to
(a) rethink your UI in terms of zoom and pan and use those in-built facilities in Cytoscape, or
(b) disable zoom and pan in Cytoscape (probably stay at (0, 0) at zoom 1) and let the user scroll the page as you add content to the graph and resize its container div to accommodate the new content.
I am new to Cytoscape, and I have a working graph, but my nodes are very far apart. While I realize Cytoscape generates everything dynamically, it seems like it should be possible to say "use half as much space between nodes".
This demo:
http://js.cytoscape.org/demos/2ebdc40f1c2540de6cf0
seems to show that you can dynamically change the lengths of edges. However, when I look at the source code (https://gist.github.com/maxkfranz/2ebdc40f1c2540de6cf0), I can't figure out how it works.
It seems like the demo is passing a edgeLength option to makeLayout, but the Cytoscape documentation doesn't even mention edgeLength as a valid option.
Can anyone more experienced with Cytoscape point me to how I can shorten the edges between my nodes?
Each layout is different, and the combination of values you use depends on what effect you're trying to create.
Force-directed layouts usually have a weight that affects edge length by spring forces.
In general, the bounding box can affect the length.
Some layouts have spacing adjustment multipliers.
Some layouts have other, miscellaneous options that affect edge length.
You have to look at the options for the layout you're interested in and experiment with them to get the effect you're looking for. That holds true for every layout for every graph theory lib, Cytoscape included.
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.
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?
Ok, it's a relatively simple problem, I want to know where, in screen space, a particular mesh was just drawn. I plan on then storing that information in a data store of some kind so that when I interact with something in screen space, I can lookup in the register and find the object, i.e, click on the spaceship drawn on the screen and then select target etc.
I can't find any way of finding out which pixels the mesh was drawn to though...
Alternatively, if I'm missing something obvious regarding what it is that I Want to do, please let me know!
There is no easy way to do that. But you can use another texture as render target and render those meshes with unique colors.
So for example you give #FF0000 to your mesh A and draw it also to your second render target with that color. Now when you select a pixel from 2nd render target and look at that color, if it is #FF0000 you can understand that, the pixel is a part of mesh A. Thus you can easily pick the mesh drawn on a certain pixel when you click one of those pixels.
Why dont you Unproject your screen space coords into 3D space? The only complication I had was the fact that I'd be left with a plane, I could check if a Mesh intersected with that plane but I often had multiple candidates for 'picking'.
Check out Google for DirectX Unproject and there are various articles discussing it. It's sometimes complicated for some to implement but done well it's actually pretty nifty; don't get put off by the people online who say it doesn't work, it does work!