dc.graph.js

Class: flexbox_layout

dc_graph. flexbox_layout

new flexbox_layout( [id])

dc_graph.flexbox_layout lays out nodes in accordance with the flexbox layout algorithm. Nodes fit into a containment hierarchy based on their keys; edges do not affect the layout but are drawn from node to node.

Since the flexbox algorithm is not ordinarily available in SVG, this class uses the css-layout package. (It does not currently support css-layout's successor yoga but that should be straightforward to add if there is interest.)

Unlike conventional graph layout, where positions are determined based on a few attributes and the topological structure of the eedges, flexbox layout is determined based on the node hierarchy and a large number of attributes on the nodes. See css-layout's Supported Attributes for a list of those attributes, and see below to understand how the hierarchy is inferred from node keys.

flexbox_layout does not require all internal nodes to be specified. The node keys are parsed as "addresses" or paths (arrays of strings) and the tree is built from those paths. Wherever a node's path terminates is where that node's data will be applied.

Since flexbox supports a vast number of attributes, we don't attempt to create accessors for every one. Instead, any attributes in the node data are copied which match the names of flexbox attributes.

Parameters:
Name Type Argument Default Description
id String <optional>
 uuid()

Unique identifier
Source:
Returns:
Type
dc_graph.flexbox_layout

Methods

addressToKey( [addressToKey])

This function constructs a node key string from an "address". An address is an array of strings identifying the path from the root to the node.

By default, it joins the address with commas.

Parameters:
Name Type Argument Default Description
addressToKey function <optional>
 function(ad) { return ad.join(','); }
Source:
Returns:

keyToAddress( [keyToAddress])

This function constructs an "address" from a node key string. An address is an array of strings identifying the path from the root to the node.

By default, it splits the key by its commas.

Parameters:
Name Type Argument Default Description
keyToAddress function <optional>
 function(nid) { return nid.split(','); }
Source:
Returns: