vasturiano/force-graph

force-graph

Force-directed graph rendered on HTML5 canvas.

A web component to represent a graph data structure in a 2-dimensional canvas using a force-directed iterative layout. Uses HTML5 canvas for rendering and d3-force for the underlying physics engine. Supports canvas zooming/panning, node dragging and node/link hover/click interactions.

See also the 3D version.

And check out the React bindings.

Examples

• Basic (source)
• Load JSON (source)
• Medium size graph (~4k elements) (source)
• Large size graph (~75k elements) (source)
• Text as nodes (source)
• Images as nodes (source)
• Directional links (using arrows) (source)
• Directional links (using moving particles) (source)
• Curved lines and self links (source)
• Automatic curvature for overlapping links (source)
• Text in links (source)
• Dash odd links (source)
• Highlight nodes/links (source)
• Multiple Node Selection (source)
• Auto-colored nodes/links (source)
• Custom node shapes (source)
• Pre-computed layout (using dagre) (source)
• Zoom/pan viewport (source)
• Click to focus on node (source)
• Click to expand/collapse nodes (source)
• Fix nodes after dragging (source)
• Fit graph to canvas (source)
• Dynamic data changes (source)
• Beeswarm chart (source)
• Node collision detection (source)
• Emit link particles on demand (source)
• Force-directed tree (DAG mode) (source)
• Expandable Tree (source)
• yarn.lock dependency graph (DAG mode) (source)
• Usage as UI to construct graphs (source)

❤️ Support This Project

If you find this module useful and would like to support its development, you can buy me a ☕. Your contributions help keep open-source sustainable!

Quick start

import ForceGraph from 'force-graph';

or using a script tag

<script src="//cdn.jsdelivr.net/npm/force-graph"></script>

then

const myGraph = new ForceGraph(<myDOMElement>)
  .graphData(<myData>);

API reference

Data input

Container layout

Node styling

Link styling

Render control

Force engine (d3-force) configuration

Interaction

Utility

Input JSON syntax

{
    "nodes": [
        {
          "id": "id1",
          "name": "name1",
          "val": 1
        },
        {
          "id": "id2",
          "name": "name2",
          "val": 10
        },
        ...
    ],
    "links": [
        {
            "source": "id1",
            "target": "id2"
        },
        ...
    ]
}