JavaScript Libraries for Graph Visualization
Problem:
You need a JavaScript library to render a directed graph dynamically on an HTML page. The graph will be relatively small, so performance is not a primary concern. Additionally, you would like the ability to manually adjust the layout by dragging nodes.
Solution:
GraphDracula
- MIT-licensed JavaScript library with support for directed graph layout in SVG format.
- Allows you to create nodes and edges easily using JavaScript code.
- Includes a force-based graph layout algorithm and supports dragging nodes.
- Still under development, but fully usable for most purposes.
Other Options:
-
vis.js: Multi-purpose library supporting network/edge graphs, timelines, and various chart types.
-
Cytoscape.js: Interactive graph analysis and visualization library with mobile support and jQuery-like conventions.
-
Jit: Interactive framework for graph drawing and layout.
-
D3.js: Powerful visualization library with support for force-directed graphs.
-
Plotly: Visualization library using D3.js with bindings for JavaScript, Python, R, and MATLAB.
-
sigma.js: Lightweight library for drawing graphs.
-
jsPlumb: jQuery plug-in for creating interactive connected graphs.
-
Springy: Force-directed graph layout algorithm.
-
JS Graph It: Drag'n'drop boxes connected by lines.
-
RaphaelJS's Graffle: Interactive graph drawing example using a vector drawing library.
-
JointJS Core: Open source diagramming library that supports interactive diagramming tools.
-
mxGraph: Commercial library for interactive graph drawing and layout.
Abandoned Libraries:
- Cytoscape Web
- Canviz JS
- arbor.js
Non-JavaScript Libraries:
- Graphviz (Emscripten port for JavaScript)
- Flare (Flash-based)
- NodeBox (Python)
- Processing.js (JavaScript port of Processing)
The above is the detailed content of Which JavaScript Library Best Visualizes Small, Drag-and-Droppable Directed Graphs?. For more information, please follow other related articles on the PHP Chinese website!