d2b › Chart Sankey
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.
# 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
links array (of link objects) is where the nodes are actually connected together, using the
target properties, along with a
value which represents the size of the link.
# Links and Nodes
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.
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.
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.
This is a complete list of properties that may be supplied to the axis chart datum. Bold properties are required.
|Array of sankey links.|
|Array of sankey nodes.|
|Number of relaxation iterations used while generating the sankey layout.|
|Event hook for d2b charts. Will be after the chart is rendered. Note: Transitions may still occur after this lifecycle hook fires.|
|Sankey link configuration options.|
|Sankey node configuration options.|
|The chart's outer padding in pixels.|
|The pixel size of the chart.|