d2bChart Sankey

# d2b.chartSankey()

Constructs a new sankey chart generator with the default settings.

When using the d2b-sankey generator you can draw a sankey chart onto each element in the selection.

# sankey(context)

Render the sankey chart(s) to the given context, which may be either a d3-selection of html containers (e.g. div) or a corresponding d3-transition.

Before applying the d2b-sankey-chart generator, you should join the data to the selected element(s) using selection.data or selection.datum. Here is the default data format.

# Default Sankey Chart

Here is a live interactive demo of the default sankey chart without any extra configurations. A sankey chart is made up of nodes and links. The nodes being endpoints connected by links. The nodes array is simply comprised of node objects containing the node name. The links array (of link objects) is where the nodes are actually connected together, using the source and target properties, along with a value which represents the size of the link.

Here is a live interactive demo of the sankey chart with link and node property configurations. As previously mentioned, a sankey chart is made up of nodes (endpoints) and links (connections). These configurations include color, tooltip (popup textboxes when hoovered), draggability, padding, and alignment properties.

# Transition

Here is a live interactive demo of the sankey chart with a transition configuration. If the button "Change Data!" is clicked, the axis chart will toggle between different data to demonstrate the transition animations. .transition() is used on the chart and chained with the desired .duration(2000) of microseconds.

# Typescript

Here is a live interactive demo of the default sankey chart without any extra configurations using typescript. Typescript ensures proper types and properties are used when creating objects, arrays, etc.

# Properties

This is a complete list of properties that may be supplied to the axis chart datum. Bold properties are required.

PropertyDetails
data.links
Array of sankey links.

Type: array
Required: true
data.nodes
Array of sankey nodes.

Type: array
Required: true
data.iterations
Number of relaxation iterations used while generating the sankey layout.

Type: number
Default: 6
Optional: true
data.updated
Event hook for d2b charts. Will be after the chart is rendered. Note: Transitions may still occur after this lifecycle hook fires.

Type: (this, data) => void
Optional: true
data.link
Sankey link configuration options.

Type: object
Optional: true
data.node
Sankey node configuration options.

Type: object
Optional: true
data.padding
The chart's outer padding in pixels.

Type: number, object
Default: 10
Optional: true
data.size
The pixel size of the chart.

Type: object
Optional: true

results matching ""

    No results matching ""