Library for Canvas/SVG web-based tree graphs with layout algorithm? [closed]

Closed. This question is seeking recommendations for books, tools, software libraries, and more. It does not meet Stack Overflow guidelines guidelines. It is not currently ac开发者_如何学编程cepting answers.

---

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 3 years ago.

Improve this question

I'm looking for a library that can draw interactive (i.e. clickable nodes) tree graphs.

Something like this but with text in the node boxes (i.e. the nodes would be of variable width and height).

Canviz doesn't have a stable release, and from what I can tell ProtoVis can't do text nodes and can only do single-parent nodes with tree layouts. Anyone aware of any libraries to do this in a browser?

---

A basic tree digram tutorial (you may expand this to get what you want) http://www.codeproject.com/KB/scripting/graphic_javascript_tree.aspx

These are additional resources you may want to take a look at =)

http://www.graphviz.org/Theory.php http://directory.google.com/Top/Science/Math/Combinatorics/Software/Graph_Drawing/

Really hope to see this out in javascript in the future, i too have quite a fair bit of usage for such classes =P

---

You may be interested in Cytoscape.js, an open-source JS graph visualisation and analysis library. It has built-in gestures, support for touch devices, and a rich API that you can use to integrate it into your webapp.

http://js.cytoscape.org

Cytoscape.js has a built-in breadthfirst layout for trees and DAGs, and this layout is very space efficient.

There is also the cytoscape-dagre extension for Cytoscape.js, which allows for using the excellent Dagre tree/DAG layout algorithm: https://github.com/cytoscape/cytoscape.js-dagre

Dagre produces very aesthetic results.

Disclaimer: I work on Cytoscape.js

---

Have you looked at JIT yet? I did some work with their radial graph, and it was a cinch.

---

Since that picture in the original post is actually created by a product of the same product family, I would like to add that "yFiles for HTML" is available commercially, too, since 2012.

The picture above has been generated by the Java variant of that library. The Javascript library variant supports all layout algorithms that the Java variant supports, with the same properties and customization capabilities. They are implemented in Javascript and do not require an active server component.

The library uses SVG as the rendering backend by default, but Canvas based renderings can be included, too. See this live demo browser for an example that shows a similar graph (HTML5-capable browser required).

Disclaimer: I work for the company that creates that library, but on SO/SE I do not represent my employer.

---

This question is pretty old and pretty high up in Google results so I thought I'd update it. GraphVis does exactly what you want in a desktop, java swing based app but this is not ideal. Their description is a hierarchical graph. I Googled that and came across dagre which is built upon d3. http://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

JIT can be made to do it but it's very cumbersome and fragile.