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

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?

Solution 1

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

Solution 2

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

Solution 3

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

Comments

[bcoughlan]

Yep, looked at SpaceTree: can't dynamically resize the node to fit the text, and can't do arcs from nodes at different depths of the tree.