API

GraphController has various methods and properties for manipulating graphs at runtime. These are described in the following sections. The following setup is omitted from the samples for brevity.

import {
  GraphController,
  defineGraph,
  defineGraphConfig,
} from 'd3-graph-controller'

const container = document.getElementById('graph') as HTMLDivElement
const graph = defineGraph({
  /* ... */
})
const config = defineGraphConfig({
  /* ... */
})

const controller = new GraphController(container, graph, config)

Methods

Filter by Node Type

Graphs can be filtered by node types. The filter can be updated at runtime as seen below.

const controller = new GraphController(container, graph, config)

controller.filterNodesByType(true, 'nodeTypeToInclude')

controller.filterNodesByType(false, 'nodeTypeToExclude')

Resize

While graphs can be configured to resize automatically, manual resizing is also possible.

const controller = new GraphController(container, graph, config)

controller.resize()

Restart

Simulations are automatically restarted when required. Should the need arise in some edge cases, simulations can be manually restarted using GraphController.restart.

An alpha value defining the heat of the simulation after restarting must be provided.

const controller = new GraphController(container, graph, config)

const alpha = 0.5

controller.restart(alpha)

Shutdown

Graphs need to be integrated in framework lifecycles. In particular, it is necessary to stop the simulation and the (optional) automatic resizing.

const controller = new GraphController(container, graph, config)

controller.shutdown()

DANGER

Not calling GraphController.shutdown when a graph is removed can cause memory leaks.

Properties

Include Unlinked

Unlinked nodes, i.e., nodes without incoming or outgoing links, can be included or excluded. The setting can be changed at runtime using the includeUnlinked property. The property can also be read to get the current state.

const controller = new GraphController(container, graph, config)

controller.includeUnlinked = false

Labels

Node and link labels can be toggled on and off using the respective property. Both properties can also be read to get the current state.

const controller = new GraphController(container, graph, config)

controller.showLinkLabels = true

controller.showNodeLabels = false

Link Filter

Link filters can be changed at runtime by assigning a new value as seen below. The property can also be read to get the current filter.

const controller = new GraphController(container, graph, config)

// Only include reflexive links
controller.linkFilter = (link: GraphLink) => link.source.id === link.target.id

Node Types

An array of available and currently filtered node types can be read using properties seen below.

const controller = new GraphController(container, graph, config)

const availableNodeTypes = controller.nodeTypes

const includedNodeTypes = controller.nodeTypeFilter