4

I'm currently trying to display a process flow with Cytoscape.js and cytoscape-dagre. While this combination does a pretty good job for simple processes (or graphs), I can't solve the problem of edges crossing nodes.

The following is rendered by the dot engine of GraphViz. Have a look at the path between "QS-Daten anlegen" and "Buchhaltungsdaten anlegen": Nodes positioned in a straight line, edges avoiding to cross nodes. Have a look at the path between "QS-Daten anlegen" and "Buchhaltungsdaten anlegen": Nodes positioned in a straight line, edges avoiding to cross nodes

The same graph rendered by cytoscape.js and cytoscape-dagre. Nodes are position similar, but not in such a straight line. Edges don't consider node positions. Nodes are position similar, but not in such a straight line. Edges don't consider node positions.

I tried to improve the result by adjusting the lyout options like nodeSep, edgeSep etc. But the main problem remains: single lines between nodes don't consider other nodes being positioned on the straight path of that edge.

I'm not sure if that is a matter of the layout algorithm, i. e. cytoscape-dagre or if cytoscape.js simply doesn't allow layout plugins to bend edges.

And of course, I don't know how to let cytoscape render that graph like the dot engine of GraphViz does.

Thanks in advance Newlukai

Newlukai
  • 549
  • 5
  • 16
  • It just turned out that I could even extract edges with control points out of Dagre. But it's simply not possible to tell Cytoscape an exact path of an edge. You only can specify the style (Bezier, Segment, ...) and then provide a list of distances from the straight edge for each control point. Which means, I could tell Cytoscape to draw a segmented line with one control point which has a distance of 25 to the straight connection. This makes it impossible to me to let Cytoscape draw a nice layout. – Newlukai Sep 14 '17 at 09:06
  • You have to convert the co-ordinate system of the points from absolute cartesian to the relative values that the lib supports. See https://github.com/cytoscape/cytoscape.js-dagre/issues/5 – maxkfranz Sep 19 '17 at 15:43
  • I already tried this, see mentioned issue and [this commit](https://github.com/newlukai/cytoscape.js-dagre/commit/3a0a7c41e37cc4e2fd00ba7068746c1627a37935) – Newlukai Sep 21 '17 at 11:09
  • @Newlukai did you figure out a solution? – fenrigne123 Aug 31 '19 at 16:20
  • Yes. I switched to [mxGraph](https://jgraph.github.io/mxgraph/). ¯\_(ツ)_/¯ – Newlukai Sep 02 '19 at 06:44

0 Answers0