Class: c3.Sankey.Butterfly

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

Overview

TODO: Position nodes that are on both the right and left wings in the middle?
TODO: If nodes are called by the focal node as well as other nodes, ensure that they are positioned in a column based on their depth from the focal.

Butterfly flow visualization.

This represents a Sankey Flow Graph that can have a focal node. The focal node is rendered in the middle and the nodes following into it are rendered on the left and the nodes flowing out of it are rendered on the right. The user can select a new node to be the focal by clicking on it. Only the depth_of_field levels of input and output nodes are rendered to keep the graph comprehensible for large graphs.

Author:

Variables Summary

version =
0.1
type =
'butterfly'
true

[Boolean] Enable or disable user navigation of nodes

depth_of_field =
2

[Number] Number of levels of nodes to visualize to the left and right of the focus node

Variable inherited from c3.Sankey

version type data links key value link_source link_target link_key link_value safe iterations alpha node_padding node_width align link_path link_path_curvature overflow_width_ratio limit_nodes limit_links nodes_options node_options rect_options links_options link_options path_options node_label_options link_label_options class options content_options _next_uid anchor height width anchor_styles handlers

Instance Method Summary

Inherited Method Summary

Methods inherited from c3.Sankey

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

Instance Method Details

# (void) _init() Bound

# (void) _update(origin) Bound

# (void) _butterfly_layout() Bound

# (void) _style(style_new) Bound

# (void) focus(focal) Bound

Focus visualization on a specified focus node. The graph will then fan out to the left and right of the focal node by depth_of_field levels.

    Quickly fuzzy find classes, mixins, methods, file:

    Control the navigation frame:

    You can focus and blur the search input: