Skip to content

Home

Jump to bottom
ricklupton edited this page Jul 19, 2016 · 2 revisions

d3-sankey-diagram is a JavaScript library for creating Sankey diagrams using d3. See the live examples to get an idea of what it does.

API

var sankeyDiagram = require('d3-sankey-diagram'),
    diagram = sankeyDiagram();

# sankeyDiagram()

Creates a new Sankey diagram component.

# diagram(selection)

Apply the diagram to a selection. An existing svg element within the selection will be used, or a new element appended. For example:

d3.select('#sankey')
    .datum(sankey)
    .call(diagram);

The Sankey data is taken from the selection's bound data, which should be an object with the following keys:

  • nodes: list of node objects (default [])

    {
    id: 'a',         // required
    direction: 'r',  // optional: either 'r' or 'l'
    ...              // other attributes are up to you
}

  • links: list of link objects (default [])

    {
    source: 'a',    // required
    target: 'b',    // required
    type: 'x',      // optional
    ...             // other attributes are up to you
}

  • order: optional list of layers

    If order is not specified, the nodes are automatically assigned to layers. If order is specified, it is used directly and no rank assignment or ordering algorithm takes place.

    The order structure has three nested lists: order is a list of layers, each of which is a list of bands, each of which is a list of node ids. For example,

    [
   [ ["layer 1 band 1"], ["layer 1 band 2"] ],
   [ ["layer 2 band 1"], ["layer 2 band 2"] ],
   ...
 ]

  • rankSets: list of rank set constraints (default [])

    Optional constraints to keep nodes in the same layer. Each entry has the form

    {
    type: 'same|min',   // optional, default 'min'
    nodes: [node ids],  // required
}

  • alignTypes: boolean (default false). Whether to align link types across nodes, or order links to minimise crossings.

Dimensions

# diagram.width([value])

If value is specified, set the width of the diagram, otherwise return the current value.

# diagram.height([value])

If value is specified, set the height of the diagram, otherwise return the current value.

# diagram.margin({ [top], [right], [bottom], [left] })

If called with an argument, set the margins of the diagram, otherwise return the current value.

Transitions

# diagram.duration([duration])

If duration is specified as a number, sets the transition duration in milliseconds. If duration is null, transitions are disabled. If duration is not specified, return the current duration.

Transitions are not fully supported by jsdom, so to use the diagram with node, you need to call

diagram.duration(null);

Data

# diagram.scale([scale])

If scale is specified as a number, sets the diagram scale. If scale is null, the scale will be reset and automatically calculated the next time the diagram is called. If scale is not specified, return the current scale.

# diagram.linkValue([linkValue])

If linkValue is specified, sets the value accessor to the specified function. If linkValue is not specified, return the current accessor.

The function is called with the graphlib edge object, with the original link accessible under the data attribute. The default implementation is

function linkValue(e) {
    return e.data.value;
}

Link appearance

# diagram.linkTypeTitle([linkTypeTitle])

If linkTypeTitle is specified, sets the link type accessor to the specified function. This is displayed in the link title element. If linkTypeTitle is not specified, return the current accessor.

The function is called with the graphlib edge object, with the original link accessible under the data attribute. The default implementation is

function linkTypeTitle(e) {
    return e.data.type;
}

# diagram.linkColor([linkColor])

If linkColor is specified, sets the link color accessor to the specified function, otherwise return the current accessor.

The function is called with the graphlib edge object, with the original link accessible under the data attribute. The default implementation is returns null.

# diagram.linkOpacity([linkOpacity])

If linkOpacity is specified, sets the link opacity accessor to the specified function, otherwise return the current accessor.

The function is called with the graphlib edge object, with the original link accessible under the data attribute. The default implementation is returns null.

Node appearance

# diagram.nodeTitle([nodeTitle])

If nodeTitle is specified, sets the title accessor to the specified function. If nodeTitle is not specified, return the current accessor. The default implementation is

function nodeTitle(d) {
    return d.id;
}

Events

# diagram.on(type[, listener])

Adds or removes an event listener for the specified type. The type string is one of selectNode, selectLink or selectGroup. The listener is invoked with the context as the element and one argument, the corresponding data.

If listener is not specified, returns the currently-assigned listener for the specified type, if any.

Clone this wiki locally