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()

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