Docs
Examples
AI

←All examples

Example directory

⌕

Getting started2

Minimal graphBasic graph

Default themes and interaction statesDefault experience

Data and state4

Node and edge mutationsData lifecycle

Queries, batch states, and visibilityQueries and states

Replace graph dataData replacement

Search and focusQueries

Elements14

Data-driven node stylesNodes

Node shapesNodes

Node stroke and radiusNodes

Edge arrow directionsEdges

Edge typesEdges

Edge colorsEdges

Edge states and weightEdges

Thin-edge hit areaEdges

Parallel and reverse edgesEdges

Self-loop edgesEdges

Label placement and iconsLabels

Label rendering policyLabels

Polyline orthogonal routingEdges

Combo containersCombos

Layouts9

Common layout switchingLayout switching

More built-in layoutsLayout gallery

FlowchartFlows

Indented treeTrees

Worker layoutLayout runtime

Radial treeTrees

Call graphFlows

Mind mapMind maps

Fishbone diagramCause analysis

Interactions8

TooltipTooltip and highlighting

Hover highlightHover

One-hop highlightHover

Click, brush, and lasso selectionSelection

Drag nodes and combosDragging

Drag edge endpointsDragging

Event logEvents

Context menuEvents

Viewport2

Viewport and coordinate conversionCanvas and coordinates

Zoom range and sensitivityZoom

Extensions7

Extension system showcasePublic extension APIs

Breathing nodeNode extensions

Custom label rendererLabel extensions

Custom nodes and explicit edge IDsNode extensions

Register a custom behaviorBehavior extensions

Custom layoutLayout extensions

Node badgesDecorations

Scenarios and performance5

Character relationship networkRelationship networks

Organization chartHierarchical graphs

AI Papers large relationship graphReal datasets

200 nodesScale

5,000 labeled nodesScale

Scenarios and performance/Relationship networks

Character relationship network

Explore a force-directed network with character nodes and relationship labels.

d3-forcelabel.nodelabel.edgehighlight-node

Live previewLoading example

Loading example

Try itZoom or pan the canvas, hover characters to highlight connections, and fit the full graph.

Loading source…

TypeScript · ESMrelationship.ts

Previous exampleCall graph Next exampleOrganization chart