Class: c3.Sankey

Defined in: js/c3-graph.coffee
Inherits: c3.Graph

Overview

TODO: Link lables
TODO: Links to missing nodes
TODO: Draggable nodes
TODO: Zoom/Pan navigation
TODO: Highlighted sub-path(s) through graph

Directed graph Sankey visualization. Provide a set of nodes and weighted links between them. Various configuration options are available to adjust the layout algorithm. Add a node_label_options with a text property to add labels to the nodes.

The implementation is based on the D3 Sankey plugin. However, it has been extended with the following:

Author:

Direct Known Subclasses

c3.Sankey.Butterfly

Variables Summary

version =
0.1
type =
'sankey'
data =
[]

[Array<>] Array of user-defined node objects

[]

[Array<>] Array of user-defined link objects

key =
undefined

[Function] Accessor function to get the key for a node object

value =
undefined

[Function] Accessor function to get the value for a node object. If not defined, then the maximum value of the input or output links of a node will be used.

undefined

[Function] Accessor function to get the key of the source node for a link. This defaults to using the source member of the link object.

undefined

[Function] Accessor function to get the key of the target node for a link. This defaults to using the target member of the link object.

undefined

[Function] Accessor function to get the key of a link. This defaults to combining the link_source and link_target accessors

undefined

[Function] Accessor function to get the value of a link. This defaults to using the value member of the link object.

safe =
true

[Boolean] Safe mode will ensure that the sum of the link values are not greater than node values for each particular node

iterations =
32

[Number] Number of iterations to run the iterative layout algorithm.

alpha =
0.99

[Number] An alpha factor to adjust the subsequent strength of each iteration. Smaller numbers will quiesce faster.

node_padding =
'20%'

[Number, String] The vertical padding between nodes. This can be the number of pixels to attempt to use between each node. If there are too many nodes for the vertical space, then fewer may be used. It can also be a string that represents the percentage of the vertical space to use for padding divided among all of the nodes.

node_width =
30

[Number, String] The horzontal width of each node. This may be a number of pixels for the node width or else a string which is the percentage of the horizontal space to use for nodes.

align =
'both'

[String] The type of alignment to use for the nodes:

  • both - Align nodes with no inputs on the left and no outputs on the right
  • left - Align nodes with no inputs on the left
'curve'

[String] The type of path to use for links between nodes:

  • curve - A curved path
  • straight - A stright line
0.5

[Number] A number representing the curvature to use for curved link paths. Ranges from 0-1.

overflow_width_ratio =
0.5

[Number] The ratio of node width that, if exceeded, will cause the layout to overflow to the right size to avoid crowding the node columns too close together. This is only valid if node_width is set as a width and not as a percentage.

limit_nodes =
undefined

[Number] Limit the number of nodes to visualize in the graph. The nodes with the top total computed values will be rendered.

undefined

[Number] Limit the number of links to visualize in the graph. This top number of links will be selected based on their link values. However, the trailing links for all of the nodes connected by those top links will also be rendered.

nodes_options =
undefined

[c3.Selection.Options] Options for the svg:g layer of all nodes

node_options =
undefined

[c3.Selection.Options] Options for the svg:g node elements

rect_options =
undefined

[c3.Selection.Options] Options for the svg:rect node elements

undefined

[c3.Selection.Options] Options for the svg:g layer of all links

undefined

[c3.Selection.Options] Options for the svg:g link elements

path_options =
undefined

[c3.Selection.Options] Options for the svg:path link elements

node_label_options =
undefined

[c3.Selection.Options] Options for the svg:text node labels

undefined

[c3.Selection.Options] Options for the svg:text link labels

Variable inherited from c3.Graph

version type class options content_options _next_uid anchor height width anchor_styles handlers

Instance Method Summary

Inherited Method Summary

Methods inherited from c3.Graph

#init #style #render #resize #redraw #restyle #_prep #_init #size #_size #update #_update #draw #_draw #_style

Instance Method Details

# (void) _init() Bound

# (void) _size() Bound

# (void) _update_data(origin) Bound

# (void) _update(origin) Bound

# (void) _layout(origin) Bound

# (void) _draw(origin) Bound

# (void) _style(style_new) Bound

    Quickly fuzzy find classes, mixins, methods, file:

    Control the navigation frame:

    You can focus and blur the search input: