I have a data structure that represents a directed graph, and I want to render that dynamically on an HTML page. These graphs will usually be just a few nodes, maybe ten at the very upper end, so my guess is that performance isn't going to be a big deal. Ideally, I'd like to be able to hook it in with jQuery so that users can tweak the layout manually by dragging the nodes around.
Note: I'm not looking for a charting library.
This question is related to
javascript
jquery
data-structures
graph-layout
The answer is
In a commercial scenario, a serious contestant for sure is yFiles for HTML:
It offers:
- Easy import of custom data (this interactive online demo seems to pretty much do exactly what the OP was looking for)
- Interactive editing for creating and manipulating the diagrams through user gestures (see the complete editor)
- A huge programming API for customizing each and every aspect of the library
- Support for grouping and nesting (both interactive, as well as through the layout algorithms)
- Does not depend on a specfic UI toolkit but supports integration into almost any existing Javascript toolkit (see the "integration" demos)
- Automatic layout (various styles, like "hierarchic", "organic", "orthogonal", "tree", "circular", "radial", and more)
- Automatic sophisticated edge routing (orthogonal and organic edge routing with obstacle avoidance)
- Incremental and partial layout (adding and removing elements and only slightly or not at all changing the rest of the diagram)
- Support for grouping and nesting (both interactive, as well as through the layout algorithms)
- Implementations of graph analysis algorithms (paths, centralities, network flows, etc.)
- Uses HTML 5 technologies like SVG+CSS and Canvas and modern Javascript leveraging properties and other more ES5 and ES6 features (but for the same reason will not run in IE versions 8 and lower).
- Uses a modular API that can be loaded on-demand using UMD loaders
Here is a sample rendering that shows most of the requested features:
Full disclosure: I work for yWorks, but on Stackoverflow I do not represent my employer.
Disclaimer: I'm a developer of Cytoscape.js
Cytoscape.js is a HTML5 graph visualisation library. The API is sophisticated and follows jQuery conventions, including
- selectors for querying and filtering (
cy.elements("node[weight >= 50].someClass")does much as you would expect), - chaining (e.g.
cy.nodes().unselect().trigger("mycustomevent")), - jQuery-like functions for binding to events,
- elements as collections (like jQuery has collections of HTMLDomElements),
- extensibility (can add custom layouts, UI, core & collection functions, and so on),
- and more.
If you're thinking about building a serious webapp with graphs, you should at least consider Cytoscape.js. It's free and open-source:
As guruz mentioned, the JIT has several lovely graph/tree layouts, including quite appealing RGraph and HyperTree visualizations.
Also, I've just put up a super simple SVG-based implementation at github (no dependencies, ~125 LOC) that should work well enough for small graphs displayed in modern browsers.
Source: Stackoverflow.com