5

we're currently building a web application (AngularJS) which needs to draw directed acyclic graphs (up to 1000 nodes, up to 10000 edges) based on dynamically created data.

Since over a year I am looking for a library/tool which is calculating the required layout and drawing a graph which can be styled, is zoom and panable, interactive (e.g. highlight children on mouse over).

Graphviz is the tool which produces the best results but it's not really ready to be used on webservers (especially as I cannot guarantee the OS and don't want to).

I tried dagre and it's d3 rendering - and I like it very much, but it has two major drawbacks: 1) it doesn't really support ranking and clustering - which makes the output rather chaotic and 2) with the graphs getting bigger its performance is getting unacceptable.

Next thing which really looked convincing was cytoscape.js as the output looks very nice and it's rather fast in drawing even larger graphs (and allowing some performance tweaking). But its standard layouting (e.g. cose or breadthfirst) doesn't produce the output we're requireing.

From my current point of view a have two chances:

1) Create layout with dagre.js and drawing the result with cytoscape.js (layout: 'preset', using the calculated x and y for nodes from dagre layout). But 'compounds'/clusters are not supported that way.

2) Using [viz.js](https://github.com/mdaines/viz.js) (an emscripted Javascript version of Graphviz, again not really performing well in drawing the graphs) to calculate the result as output format plain and again using this result to draw it with cytoscape.js.

Now my question(s):

1) Do you have another idea how to achieve it?

2) Could you give me any hint on how to ideally link the chain if my ideas are correct?

(AngularJS -> REST Backend -> JSON to Frontend -> Restructure JSON for dagre or viz -> Calculate layout -> input result to cytoscape -> render in browser?!?) and is there a chance to do the layout calculation on my node.js frontend server and not the client itself (again due to performance)?

Any hint and idea is heaviley appreciated.

LBA
  • 3,859
  • 2
  • 21
  • 60
  • out of curiosity, what did you set up to do in the end? – user3743222 Jun 22 '16 at 01:55
  • @user3743222: Still an open topic for me, I am currently using vis.js network http://visjs.org/network_examples.html, but still is not fully what I am looking for. – LBA Jun 24 '16 at 09:04
  • @LBA Were you able to figure out how to achieve this? I am looking for a solution for a similar use case. – Chandu Sep 27 '18 at 14:52
  • @Chandu, sorry, question still open and valid for me – LBA Sep 27 '18 at 20:53
  • 1
    I've still not found a solution that renders (directed) graphs with clusters as well as Graphviz. I'm using [d3-graphviz](https://github.com/magjac/d3-graphviz). Graphviz is great, but I'd prefer a source format that was more JavaScript-friendly (that's a clumsy term, but I can articulate what I mean, if asked) than DOT. – Graham Hannington Mar 28 '19 at 08:56

2 Answers2

1

It sounds like you're dissatisfied with Dagre as a compound layout. That makes sense, because the author of Dagre did not implement compound support for it. Dagre is separate from Cytoscape.js but can be used by it. You'll note the author of Dagre has stated he will no longer update the library with new features from himself. Thus, your options are:

(1) Use another Cytoscape.js layout actually designed for compound nodes, like CoSE or Cola.

(2) Write your own layout for Cytoscape.js that meets your needs: http://js.cytoscape.org/#extensions/layouts

(3) Adapt Dagre to recognise compound nodes and make a pull request to the author: https://github.com/cpettitt/dagre Then the Cytoscape.js layout for Dagre can be updated to use the new Dagre APIs that you add.

Currently, compound graph layout is an open research area -- so you'll be hard pressed to find many layouts that support them at all in any library. Cytoscape.js has some compound supporting layouts, and you're free to fork them if you want different behaviour. Also note that the 2.5 branch has CoSE2 with an improved algorithm.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • 1
    I need compound nodes in directed graphs, too. I'm experimenting with the Cola layout in Cytoscape, which looks promising, but I'm still currently getting the best-looking results with (a JavaScript port of) Graphviz (clusters). – Graham Hannington Aug 19 '16 at 15:33
0

Cytoscape.js can use a dagre layout. You can look here in the cytoscape docs for more information, but you can just add your nodes and edges to the graph and then run the dagre layout. That way you don't have to position all of the nodes manually based on the position of nodes from the separate dagre.js.

trangevi
  • 355
  • 1
  • 7
  • Thanks, but as dagre is still not fully supporting ranking and according to cytoscape's documentation compound's/clusters with dagre are still an open issue this is not fully feasible for me, but thanks! – LBA Aug 27 '15 at 15:55