d3-sankey

D3 4.0 implementation of the Sankey plugin to visualize the flow between nodes in a directed acyclic network.

Installing

If you use NPM, npm install d3-sankey. Otherwise, download the latest release.

You can also load directly from unpkg.

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/d3-sankey@0"></script>
<script>

var sankey = d3.sankey();

</script>

Demo

Here is Mike Bostock's famous example recreated with d3-sankey.

Clone or download the block, then run npm install and npm run build to create d3.min.js.

API Reference

# sankey()

Constructs a new sankey generator with the default settings.

# sankey.nodeWidth([width])

If width is specified, sets the node width to the specified function or number and returns this sankey generator. If width is not specified, returns the current node width accessor, which defaults to:

function nodeWidth() {
  return 24;
}

# sankey.nodePadding([padding])

If padding is specified, sets the node padding to the specified function or number and returns this sankey generator. If padding is not specified, returns the current node padding accessor, which defaults to:

function nodePadding() {
  return 8;
}

Here padding refers to the vertical space between nodes that occupy the same horizontal space.

# sankey.nodes([nodes])

If nodes is specified, sets the list of nodes to the specified function or array and returns this sankey generator. If nodes is not specified, returns the current accessor to the list of nodes, which defaults to:

function nodes() {
  return [];
}

# sankey.links([links])

If links is specified, sets the list of links to the specified function or array and returns this sankey generator. If links is not specified, returns the current accessor to the list of links, which defaults to:

function links() {
  return [];
}

# sankey.layout([iterations])

Returns the current accessor to the SVG layout object. Here iterations is the number of times the converging function computeNodeDepths is run.

# sankey.relayout()

Similar to layout but only recalculates the depth of links. Primarily used when a node is moved vertically.