A TypeScript library for visualizing and simulating directed, interactive graphs.
- 👉 Fully interactive dragging, panning, zooming and more. Supports touch input and uses multi-touch.
- 📱 Responsive graphs that fit any screen thanks to automatic or manual resizing.
- 🔧 Extensive configuration enables customizable behavior and visuals.
# yarn
$ yarn add d3-graph-controller
# npm
$ npm install d3-graph-controller
import {
defineGraph,
defineGraphConfig,
defineLink,
defineNodeWithDefaults,
Graph,
GraphController,
} from 'd3-graph-controller'
import 'd3-graph-controller/default.css'
const a = defineNodeWithDefaults({
type: 'node',
id: 'a',
label: {
color: 'black',
fontSize: '1rem',
text: 'A',
},
})
const b = defineNodeWithDefaults({
type: 'node',
id: 'b',
label: {
color: 'black',
fontSize: '1rem',
text: 'B',
},
})
const link = defineLink({
source: a,
target: b,
color: 'gray',
label: false,
})
const graph = defineGraph({
nodes: [a, b],
links: [link],
})
// A reference to the native host element, e.g., an HTMLDivElement. This is framework agnostic.
// You may use Angular's @ViewChild, Vue's $ref, plain JavaScript or something else entirely.
const container = document.getElementById('graph') as HTMLDivElement
const controller = new GraphController(container, graph, defineGraphConfig())
// Integrate the controller into the lifecycle of your application
controller.shutdown()
In addition to the default style, that is available by adding import 'd3-graph-controller/default.css'
to your project, it is possible to configure font-size and color of graph elements.
Both properties of nodes and links accept valid CSS expressions.
This allows you to use dynamic colors with CSS variables:
:root {
--color-primary: 'red';
}
import { defineNodeWithDefaults } from 'd3-graph-controller'
defineNodeWithDefaults({
type: 'node',
id: 'a',
label: {
color: 'black',
fontSize: '2rem',
text: 'A',
},
color: 'var(--color-primary)',
})
For customization of the default theme, the custom CSS property --color-node-stroke
can be used.
# install dependencies
$ pnpm install
# build for production
$ pnpm build
# build in watch mode
$ pnpm dev
# lint project files
$ pnpm lint
MIT - Copyright © Jan Müller