d3-graph-controller

Documentation · Demo

A TypeScript library for visualizing and simulating directed, interactive graphs.

Features

• 👉 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.

Installation

# yarn
$ yarn add d3-graph-controller

# npm
$ npm install d3-graph-controller

Usage

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 lifecylce of your application
controller.shutdown()

Styling

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.

Development

# install dependencies
$ yarn install

# build for production
$ yarn build

# build in watch mode
$ yarn dev

# lint project files
$ yarn lint

# serve docs
$ yarn docs:dev

License

MIT - Copyright © Jan Müller