dc.graph.js

Class: diagram

dc_graph. diagram

new diagram(parent [, chartGroup])

dc_graph.diagram is a dc.js-compatible network visualization component. It registers in the dc.js chart registry and its nodes and edges are generated from crossfilter groups. It logically derives from the dc.js baseMixin, but it does not physically derive from it since so much is different about network visualization versus conventional charts.

Parameters:
Name Type Argument Description
parent String | node

Any valid d3 single selector specifying a dom block element such as a div; or a dom element.
chartGroup String <optional>

The name of the dc.js chart group this diagram instance should be placed in. Filter interaction with a diagram will only trigger events and redraws within the diagram's group.
Source:
Returns:
Type
dc_graph.diagram

Methods

altKeyZoom( [altKeyZoom])

Whether zooming should only be enabled when the alt key is pressed.

Parameters:
Name Type Argument Default Description
altKeyZoom Boolean <optional>
 true
Source:
Returns:

anchor( [parent] [, chartGroup])

Set the root SVGElement to either be any valid d3 single selector specifying a dom block element such as a div; or a dom element or d3 selection. This class is called internally on diagram initialization, but be called again to relocate the diagram. However, it will orphan any previously created SVGElements.

Parameters:
Name Type Argument Description
parent anchorSelector | anchorNode | d3.selection <optional>
chartGroup String <optional>
Source:
Returns:

anchorName()

Returns the DOM id for the chart's anchored location.

Source:
Returns:
Type
String

autoZoom( [autoZoom])

Auto-zoom behavior.

  • 'always' - zoom every time layout happens
  • 'once' - zoom the next time layout happens
  • null - manual, call zoomToFit to fit
Parameters:
Name Type Argument Default Description
autoZoom String <optional>
 null
Source:
Returns:

baseLength( [baseLength])

Gets or sets the default edge length (in pixels) when the .lengthStrategy is 'individual', and the base value to be multiplied for 'symmetric' and 'jaccard' edge lengths.

Deprecated: use cola_layout.baseLength instead.

Parameters:
Name Type Argument Description
baseLength Number <optional>
Source:
Returns:

child( [id] [, object])

Specifies another kind of child layer or interface. For example, this can be used to display tooltips on nodes using dc_graph.tip. The child needs to support a parent method, the diagram to modify.

Parameters:
Name Type Argument Description
id String <optional>

the name of the child to modify or add
object Object <optional>

the child object to add, or null to remove
Source:
Returns:
Type
dc_graph.diagram
Example
// Display tooltips on node hover, via the d3-tip library
var tip = dc_graph.tip()
tip.content(function(n, k) {
  // you can do an asynchronous call here, e.g. d3.json, if you need
  // to fetch data to show the tooltip - just call k() with the content
  k("This is <em>" + n.orig.value.name + "</em>");
});
diagram.child('tip', tip);

clusterDimension( [clusterDimension])

Set or get the crossfilter dimension which represents the edges in the diagram. Typically there will be a crossfilter instance for the nodes, and another for the edges.

As with node and edge dimensions, the diagram will itself not filter on cluster dimensions; this is included for symmetry, and for modes which may want to filter clusters.

Parameters:
Name Type Argument Description
clusterDimension crossfilter.dimension <optional>
Source:
Returns:

clusterGroup( [clusterGroup])

Set or get the crossfilter group which is the data source for clusters in the diagram.

The key/value pairs returned by diagram.clusterGroup().all() need to support, at a minimum, the clusterKey and clusterParent accessors, which should return keys in this group.

Parameters:
Name Type Argument Description
clusterGroup crossfilter.group <optional>
Source:
Returns:

clusterKey( [clusterKey])

Set or get the function which will be used to retrieve the unique key for each cluster. By default, this accesses the key field of the object passed to it.

Parameters:
Name Type Argument Default Description
clusterKey function <optional>
 function(kv) { return kv.key }
Source:
Returns:

clusterPadding( [clusterPadding])

Set or get the function which will be used to retrieve the padding, in pixels, around a cluster.

To be implemented. If a single value is returned, it will be used on all sides; if two values are returned they will be interpreted as the vertical and horizontal padding.

Parameters:
Name Type Argument Default Description
clusterPadding function <optional>
 function(kv) { return kv.key }
Source:
Returns:

clusterParent( [clusterParent])

Set or get the function which will be used to retrieve the key of the parent of a cluster, which is another cluster.

Parameters:
Name Type Argument Default Description
clusterParent function <optional>
 function(kv) { return kv.key }
Source:
Returns:

constrain( [constrain])

Gets or sets a function which will be called with the current nodes and edges on each redraw in order to derive new layout constraints. The constraints are built from scratch on each redraw.

This can be used to generate alignment (rank) or axis constraints. By default, no constraints will be added, although cola.js uses constraints internally to implement flow and overlap prevention. See the cola.js wiki for more details.

For convenience, dc.graph.js implements a other constraints on top of those implemented by cola.js:

  • 'ordering' - the nodes will be ordered on the specified axis according to the keys returned by the ordering function, by creating separation constraints using the specified gap.
  • 'circle' - (experimental) the nodes will be placed in a circle using "wheel" edge lengths similar to those described in Scalable, Versatile, and Simple Constrained Graph Layout Although this is not as performant or stable as might be desired, it may work for simple cases. In particular, it should use edge length constraints, which don't yet exist in cola.js.

Because it is tedious to write code to generate constraints for a graph, dc.graph.js also includes a constraint generator to produce this constrain function, specifying the constraints themselves in a graph.

Parameters:
Name Type Argument Description
constrain function <optional>
Source:
Returns:

deleteDelay( [deleteDelay])

The delete transition happens simultaneously with layout, which can take longer than the transition duration. Delaying it can bring it closer to the other staged transitions.

Parameters:
Name Type Argument Default Description
deleteDelay Number <optional>
 0
Source:
Returns:

edgeArrowhead( [edgeArrowhead])

Set or get the function which will be used to retrieve the name of the arrowhead to use for the target/ head/destination of the edge. Arrow symbols can be specified with .defineArrow(). Return null to display no arrowhead.

Parameters:
Name Type Argument Default Description
edgeArrowhead function | String <optional>
 'vee'
Source:
Returns:

edgeArrowSize( [edgeArrowSize])

Multiplier for arrow size.

Parameters:
Name Type Argument Default Description
edgeArrowSize function | Number <optional>
 1
Source:
Returns:

edgeArrowtail( [edgeArrowtail])

Set or get the function which will be used to retrieve the name of the arrow tail to use for the tail/source of the edge. Arrow symbols can be specified with .defineArrow(). Return null to display no arrowtail.

Parameters:
Name Type Argument Default Description
edgeArrowtail function | String <optional>
 null
Source:
Returns:

edgeDimension( [edgeDimension])

Set or get the crossfilter dimension which represents the edges in the diagram. Typically there will be a crossfilter instance for the nodes, and another for the edges.

Dimensions are included on the diagram for similarity to dc.js, however the diagram itself does not use them - but filter_selection will.

Parameters:
Name Type Argument Description
edgeDimension crossfilter.dimension <optional>
Source:
Returns:

edgeGroup( [edgeGroup])

Set or get the crossfilter group which is the data source for the edges in the diagram. See .nodeGroup above for the way data is loaded from a crossfilter group.

The values in the key/value pairs returned by diagram.edgeGroup().all() need to support, at a minimum, the nodeSource and nodeTarget, which should return the same keys as the nodeKey

Parameters:
Name Type Argument Description
edgeGroup crossfilter.group <optional>
Source:
Returns:

edgeIsLayout( [edgeIsLayout])

To draw an edge but not have it affect the layout, specify a function which returns false for that edge. By default, will return false if the notLayout field of the edge value is truthy, true otherwise.

Parameters:
Name Type Argument Description
edgeIsLayout function | Boolean <optional>
Source:
Returns:
Example
// Default behavior
diagram.edgeIsLayout(function(kv) {
  return !kv.value.notLayout;
});

edgeKey( [edgeKey])

Set or get the function which will be used to retrieve the unique key for each edge. By default, this accesses the key field of the object passed to it.

Parameters:
Name Type Argument Default Description
edgeKey function <optional>
 function(kv) { return kv.key }
Source:
Returns:

edgeLabel( [edgeLabel])

Set or get the function which will be used to retrieve the edge label text. The label is displayed when an edge is hovered over. By default, uses the edgeKey.

Parameters:
Name Type Argument Description
edgeLabel function | String <optional>
Source:
Returns:
Example
// Default behavior
diagram.edgeLabel(function(e) {
  return _diagram.edgeKey()(e);
});

edgeLength( [edgeLength])

When the .lengthStrategy is 'individual', this accessor will be used to read the length of each edge. By default, reads the distance field of the edge. If the distance is falsy, uses the baseLength.

Parameters:
Name Type Argument Description
edgeLength function | Number <optional>
Source:
Returns:
Example
// Default behavior
diagram.edgeLength(function(kv) {
  return kv.value.distance;
});

edgeOpacity( [edgeOpacity])

Set or get the function which will be used to retrieve the edge opacity, a number from 0 to 1.

Parameters:
Name Type Argument Default Description
edgeOpacity function | Number <optional>
 1
Source:
Returns:

edgeOrdering( [edgeOrdering])

By default, edges are added to the layout in the order that .edgeGroup().all() returns them. If specified, .edgeOrdering provides an accessor that returns a key to sort the edges on.

It would be better not to rely on ordering to affect layout, but it may affect the layout in some cases. (Probably less than node ordering, but it does affect which parallel edge is which.)

Parameters:
Name Type Argument Default Description
edgeOrdering function <optional>
 null
Source:
Returns:

edgeSource( [edgeSource])

Set or get the function which will be used to retrieve the source (origin/tail) key of the edge objects. The key must equal the key returned by the .nodeKey for one of the nodes; if it does not, or if the node is currently filtered out, the edge will not be displayed. By default, looks for .value.sourcename.

Parameters:
Name Type Argument Default Description
edgeSource function <optional>
 function(kv) { return kv.value.sourcename; }
Source:
Returns:

edgeStroke( [edgeStroke])

Set or get the function which will be used to retrieve the stroke color for the edges.

Parameters:
Name Type Argument Default Description
edgeStroke function | String <optional>
 'black'
Source:
Returns:

edgeStrokeWidth( [edgeStrokeWidth])

Set or get the function which will be used to retrieve the stroke width for the edges.

Parameters:
Name Type Argument Default Description
edgeStrokeWidth function | Number <optional>
 1
Source:
Returns:

edgeTarget( [edgeTarget])

Set or get the function which will be used to retrieve the target (destination/head) key of the edge objects. The key must equal the key returned by the nodeKey for one of the nodes; if it does not, or if the node is currently filtered out, the edge will not be displayed. By default, looks for .value.targetname.

Parameters:
Name Type Argument Default Description
edgeTarget function <optional>
 function(kv) { return kv.value.targetname; }
Source:
Returns:

fitStrategy( [fitStrategy])

Set or get the fitting strategy for the canvas, which affects how the translate and scale get calculated when autoZoom is triggered.

  • 'default' - simulates the preserveAspectRatio behavior of xMidYMid meet, but with margins - the content is stretched or squished in the more constrained direction, and centered in the other direction
  • 'vertical' - fits the canvas vertically (with vertical margins) and centers it horizontally. If the canvas is taller than the viewport, it will meet vertically and there will be blank areas to the left and right. If the canvas is wider than the viewport, it will be sliced.
  • 'horizontal' - fits the canvas horizontally (with horizontal margins) and centers it vertically. If the canvas is wider than the viewport, it will meet horizontally and there will be blank areas above and below. If the canvas is taller than the viewport, it will be sliced.

Other options

  • null - no attempt is made to fit the content in the viewport
  • 'zoom' - does not scale the content, but attempts to bring as much content into view as possible, using using the same algorithm as restrictPan
  • 'align_{tlbrc}[2]' - does not scale; aligns up to two sides or centers them
Parameters:
Name Type Argument Default Description
fitStrategy String <optional>
 'default'
Source:
Returns:

flowLayout( [flowLayout])

This should be equivalent to rankdir and ranksep in the dagre/graphviz nomenclature, but for now it is separate.

Deprecated: use cola_layout.flowLayout instead.

Parameters:
Name Type Argument Description
flowLayout Object <optional>
Source:
Example
// No flow (default)
diagram.flowLayout(null)
// flow in x with min separation 200
diagram.flowLayout({axis: 'x', minSeparation: 200})

g( [selection])

Returns the top g element for this specific diagram. This method is usually used to retrieve the g element in order to overlay custom svg drawing programatically. Caution: The root g element is usually generated internally, and resetting it might produce unpredictable results.

Parameters:
Name Type Argument Description
selection d3.selection <optional>
Source:
Returns:

getStats()

Returns an object with current statistics on graph layout.

  • nnodes - number of nodes displayed
  • nedges - number of edges displayed
Source:
Returns:

groupConnected( [groupConnected])

Whether to put connected components each in their own group, to stabilize layout.

Parameters:
Name Type Argument Default Description
groupConnected String <optional>
 false
Source:
Returns:

handleDisconnected( [handleDisconnected])

Instructs cola.js to fit the connected components.

Deprecated: Use cola_layout.handleDisconnected instead.

Parameters:
Name Type Argument Default Description
handleDisconnected Boolean <optional>
 true
Source:
Returns:

height( [height])

Set or get the height attribute of the diagram. If a value is given, then the diagram is returned for method chaining. If no value is given, then the current value of the height attribute will be returned.

The width and height are applied to the SVG element generated by the diagram on render, or when resizeSvg is called.

If the value is falsy or a function, the height will be calculated the first time it is needed, using the provided function or default height calculator, and then cached. The default calculator uses the client rect of the element specified when constructing the chart, with a minimum of minHeight. A custom calculator will be passed the element.

If the value is 'auto', the height will be calculated every time the diagram is drawn, and it will not be set on the <svg> element. Instead, the element will be pinned to the same rectangle as its containing div using CSS.

Parameters:
Name Type Argument Default Description
height Number <optional>
 200
Source:
Returns:

induceNodes( [induceNodes])

By default, all nodes are included, and edges are only included if both end-nodes are visible. If .induceNodes is set, then only nodes which have at least one edge will be shown.

Parameters:
Name Type Argument Default Description
induceNodes Boolean <optional>
 false
Source:
Returns:

initialLayout( [initialLayout])

Function to call to generate an initial layout. Takes (diagram, nodes, edges)

Deprecated: The only layout that was using this was tree_positions and it never worked as an initialization step for cola, as was originally intended. Now that tree_layout is a layout algorithm, this should go away.

In the future, there will be support for chaining layout algorithms. But that will be a matter of composing them into a super-algorithm, not a special step like this was.

Parameters:
Name Type Argument Default Description
initialLayout function <optional>
 null
Source:
Returns:

initLayoutOnRedraw( [initLayoutOnRedraw])

Currently there are some bugs when the same instance of cola.js is used multiple times. (In particular, overlaps between nodes may not be eliminated if cola is not reinitialized This flag can be set true to construct a new cola layout object on each redraw. However, layout seems to be more stable if this is set false, so hopefully this will be fixed soon.

Parameters:
Name Type Argument Default Description
initLayoutOnRedraw Boolean <optional>
 false
Source:
Returns:

layoutAlgorithm( [algo])

Specify 'cola' (the default) or 'dagre' as the Layout Algorithm and it will replace the back-end.

Deprecated: use diagram.layoutEngine with the engine object instead

Parameters:
Name Type Argument Default Description
algo String <optional>
 'cola'

the name of the layout algorithm to use
Source:
Returns:
Type
dc_graph.diagram
Example
// use dagre for layout
diagram.layoutAlgorithm('dagre');

layoutEngine( [engine])

The layout engine determines positions of nodes and edges.

Parameters:
Name Type Argument Default Description
engine Object <optional>
 null

the layout engine to use
Source:
Example
// use cola with no webworker
diagram.layoutEngine(dc_graph.cola_layout());
// use dagre with a webworker
diagram.layoutEngine(dc_graph.webworker_layout(dc_graph.dagre_layout()));

layoutUnchanged( [layoutUnchanged])

Whether to perform layout when the data is unchanged from the last redraw.

Parameters:
Name Type Argument Default Description
layoutUnchanged Boolean <optional>
 false
Source:
Returns:

legend( [legend])

Assigns a legend object which will be displayed within the same SVG element and according to the visual encoding of this diagram.

Parameters:
Name Type Argument Default Description
legend Object <optional>
 null
Source:
Returns:

lengthStrategy( [lengthStrategy])

Currently, three strategies are supported for specifying the lengths of edges:

  • 'individual' - uses the edgeLength for each edge. If it returns falsy, uses the baseLength
  • 'symmetric', 'jaccard' - compute the edge length based on the graph structure around the edge. See the cola.js wiki for more details. 'none' - no edge lengths will be specified

Deprecated: Use cola_layout.lengthStrategy instead.

Parameters:
Name Type Argument Default Description
lengthStrategy function | String <optional>
 'symmetric'
Source:
Returns:

mouseZoomable( [mouseZoomable])

Get or set whether mouse wheel rotation or touchpad gestures will zoom the diagram, and whether dragging on the background pans the diagram.

Parameters:
Name Type Argument Default Description
mouseZoomable Boolean <optional>
 true
Source:
Returns:

nodeDimension( [nodeDimension])

Set or get the crossfilter dimension which represents the nodes (vertices) in the diagram. Typically there will be a crossfilter instance for the nodes, and another for the edges.

Dimensions are included on the diagram for similarity to dc.js, however the diagram itself does not use them - but filter_selection will.

Parameters:
Name Type Argument Description
nodeDimension crossfilter.dimension <optional>
Source:
Returns:

nodeFill( [nodeFill])

Set or get the function which will be used to retrieve the fill color for the body of each node.

Parameters:
Name Type Argument Default Description
nodeFill function | String <optional>
 'white'
Source:
Returns:

nodeFillScale( [nodeFillScale])

If set, the value returned from nodeFill will be processed through this d3.scale to return the fill color. If falsy, uses the identity function (no scale).

Parameters:
Name Type Argument Description
nodeFillScale function | d3.scale <optional>
Source:
Returns:

nodeFitLabel( [nodeFitLabel])

Whether to fit the node shape around the label

Parameters:
Name Type Argument Default Description
nodeFitLabel function | Boolean <optional>
 true
Source:
Returns:

nodeFixed( [nodeFixed])

Specify an accessor that returns an {x,y} coordinate for a node that should be fixed in place, and returns falsy for other nodes.

Parameters:
Name Type Argument Default Description
nodeFixed function | Object <optional>
 null
Source:
Returns:

nodeGroup( [nodeGroup])

Set or get the crossfilter group which is the data source for the nodes in the diagram. The diagram will use the group's .all() method to get an array of {key, value} pairs, where the key is a unique identifier, and the value is usually an object containing the node's attributes. All accessors work with these key/value pairs.

If the group is changed or returns different values, the next call to .redraw() will reflect the changes incrementally.

It is possible to pass another object with the same .all() interface instead of a crossfilter group.

Parameters:
Name Type Argument Description
nodeGroup crossfilter.group <optional>
Source:
Returns:

nodeKey( [nodeKey])

Set or get the function which will be used to retrieve the unique key for each node. By default, this accesses the key field of the object passed to it. The keys should match the keys returned by the edgeSource and edgeTarget.

Parameters:
Name Type Argument Default Description
nodeKey function <optional>
 function(kv) { return kv.key }
Source:
Returns:

nodeLabel( [nodeLabel])

Set or get the function which will be used to retrieve the label text to display in each node. By default, looks for a field label or name inside the value field.

Parameters:
Name Type Argument Description
nodeLabel function | String <optional>
Source:
Returns:
Example
// Default behavior
diagram.nodeLabel(function(kv) {
  return kv.value.label || kv.value.name;
});

nodeLabelFill( [nodeLabelFill])

Set or get the function which will be used to retrieve the label fill color. Default: null

Parameters:
Name Type Argument Default Description
nodeLabelFill function | String <optional>
 null
Source:
Returns:

nodeLabelPadding( [nodeLabelPadding])

Set or get the padding, in pixels, for a node's label. If an object, should contain fields x and y. If a number, will be applied to both x and y.

Parameters:
Name Type Argument Default Description
nodeLabelPadding function | Number | Object <optional>
 0
Source:
Returns:

nodeLineHeight( [nodeLineHeight])

Set or get the line height for nodes with multiple lines of text, in ems.

Parameters:
Name Type Argument Default Description
nodeLineHeight function | Number <optional>
 1
Source:
Returns:

nodeOpacity( [nodeOpacity])

Set or get the function which will be used to retrieve the opacity of each node.

Parameters:
Name Type Argument Default Description
nodeOpacity function | Number <optional>
 1
Source:
Returns:

nodeOrdering( [nodeOrdering])

By default, nodes are added to the layout in the order that .nodeGroup().all() returns them. If specified, .nodeOrdering provides an accessor that returns a key to sort the nodes on. It would be better not to rely on ordering to affect layout, but it may affect the layout in some cases.

Parameters:
Name Type Argument Default Description
nodeOrdering function <optional>
 null
Source:
Returns:

nodePadding( [nodePadding])

Set or get the padding or minimum distance, in pixels, for a node. (Will be distributed to both sides of the node.)

Parameters:
Name Type Argument Default Description
nodePadding function | Number <optional>
 6
Source:
Returns:

nodeParentCluster( [nodeParentCluster])

Set or get the function which will be used to retrieve the parent cluster of a node, or null if the node is not in a cluster.

Parameters:
Name Type Argument Default Description
nodeParentCluster function <optional>
 function(kv) { return kv.key }
Source:
Returns:

nodeRadius( [nodeRadius])

Set or get the function which will be used to retrieve the radius, in pixels, for each node. This determines the height of nodes,and if nodeFitLabel is false, the width too.

Parameters:
Name Type Argument Default Description
nodeRadius function | Number <optional>
 25
Source:
Returns:

nodeShape( [nodeShape])

The shape to use for drawing each node, specified as an object with at least the field shape. The names of shapes are mostly taken from graphviz; currently ellipse, egg, triangle, rectangle, diamond, trapezium, parallelogram, pentagon, hexagon, septagon, octagon, invtriangle, invtrapezium, square, polygon are supported.

If shape = polygon:

  • sides: number of sides for a polygon
Parameters:
Name Type Argument Default Description
nodeShape function | Object <optional>
 {shape: 'ellipse'}
Source:
Returns:
Example
// set shape to diamond or parallelogram based on flag
diagram.nodeShape(function(kv) {
  return {shape: kv.value.flag ? 'diamond' : 'parallelogram'};
});

nodeStroke( [nodeStroke])

Set or get the function which will be used to retrieve the stroke color for the outline of each node.

Parameters:
Name Type Argument Default Description
nodeStroke function | String <optional>
 'black'
Source:
Returns:

nodeStrokeWidth( [nodeStrokeWidth])

Set or get the function which will be used to retrieve the stroke width, in pixels, for drawing the outline of each node. According to the SVG specification, the outline will be drawn half on top of the fill, and half outside. Default: 1

Parameters:
Name Type Argument Default Description
nodeStrokeWidth function | Number <optional>
 1
Source:
Returns:

nodeTitle( [nodeTitle])

Set or get the function which will be used to retrieve the node title, usually rendered as a tooltip. By default, uses the key of the node.

Parameters:
Name Type Argument Description
nodeTitle function | String <optional>
Source:
Returns:
Example
// Default behavior
diagram.nodeTitle(function(kv) {
  return _diagram.nodeKey()(kv);
});

on( [event] [, f])

Standard dc.js baseMixin method. Attaches an event handler to the diagram. The currently supported events are

  • start() - layout is starting
  • drawn(nodes, edges) - the node and edge elements have been rendered to the screen and can be modified through the passed d3 selections.
  • end() - diagram layout has completed.
Parameters:
Name Type Argument Description
event String <optional>

the event to subscribe to
f function <optional>

the event handler
Source:
Returns:
Type
dc_graph.diagram

parallelEdgeOffset( [parallelEdgeOffset])

If there are multiple edges between the same two nodes, start them this many pixels away from the original so they don't overlap.

Parameters:
Name Type Argument Default Description
parallelEdgeOffset Number <optional>
 10
Source:
Returns:

rankdir( [rankdir])

Direction to draw ranks. Currently for dagre and expand_collapse, but I think cola could be generated from graphviz-style since it is more general.

Deprecated: use dagre_layout.rankdir instead.

Parameters:
Name Type Argument Description
rankdir String <optional>
Source:

redraw()

Standard dc.js baseMixin method. Computes a new layout based on the nodes and edges in the edge groups, and displays the diagram. To the extent possible, the diagram will minimize changes in positions from the previous layout. .render() must be called the first time, and .redraw() can be called after that.

.redraw() will be triggered by changes to the filters in any other charts in the same dc.js chart group.

Unlike in dc.js, redraw executes asynchronously, because drawing can be computationally intensive, and the diagram will be drawn multiple times if showLayoutSteps is enabled. Watch the 'end' event to know when layout is complete.

Source:
Returns:
Type
dc_graph.diagram

redrawGroup()

Standard dc.js baseMixin method. Causes all charts in the chart group to be redrawn.

Source:
Returns:
Type
dc_graph.diagram

relayout()

When layoutUnchanged is false, this will force layout to happen again. This may be needed when changing a parameter but not changing the topology of the graph. (Yes, probably should not be necessary.)

Source:
Returns:
Type
dc_graph.diagram

render()

Standard dc.js baseMixin method. Erases any existing SVG elements and draws the diagram from scratch. .render() must be called the first time, and .redraw() can be called after that.

Source:
Returns:
Type
dc_graph.diagram

renderGroup()

Standard dc.js baseMixin method. Causes all charts in the chart group to be rendered.

Source:
Returns:
Type
dc_graph.diagram

resetSvg()

Standard dc.js baseMixin method. Remove the diagram's SVG elements from the dom and recreate the container SVG element.

Source:
Returns:
Type
dc_graph.diagram

root( [root])

Get or set the root element, which is usually the parent div. Normally the root is set when the diagram is constructed; setting it later may have unexpected consequences.

Parameters:
Name Type Argument Default Description
root node <optional>
 null
Source:
Returns:

select( [selector])

Standard dc.js baseMixin method. Execute a d3 single selection in the diagram's scope using the given selector and return the d3 selection. Roughly the same as

d3.select('#diagram-id').select(selector)

Since this function returns a d3 selection, it is not chainable. (However, d3 selection calls can be chained after it.)

Parameters:
Name Type Argument Description
selector String <optional>
Source:
Returns:

selectAll( [selector])

Standard dc.js baseMixin method. Selects all elements that match the d3 single selector in the diagram's scope, and return the d3 selection. Roughly the same as

d3.select('#diagram-id').selectAll(selector)

Since this function returns a d3 selection, it is not chainable. (However, d3 selection calls can be chained after it.)

Parameters:
Name Type Argument Description
selector String <optional>
Source:
Returns:

showLayoutSteps( [showLayoutSteps])

If this flag is true, the positions of nodes and will be updated while layout is iterating. If false, the positions will only be updated once layout has stabilized. Note: this may not be compatible with transitionDuration.

Parameters:
Name Type Argument Default Description
showLayoutSteps Boolean <optional>
 false
Source:
Returns:

stageTransitions( [stageTransitions])

How transitions should be split into separate animations to emphasize the delete, modify, and insert operations:

  • none: modify and insert operations animate at the same time
  • modins: modify operations happen before inserts
  • insmod: insert operations happen before modifies

Deletions always happen before/during layout computation.

Parameters:
Name Type Argument Default Description
stageTransitions String <optional>
 'none'
Source:
Returns:

svg( [selection])

Standard dc.js baseMixin method. Returns the top svg element for this specific diagram. You can also pass in a new svg element, but setting the svg element on a diagram may have unexpected consequences.

Parameters:
Name Type Argument Description
selection d3.selection <optional>
Source:
Returns:

timeLimit( [timeLimit])

Gets or sets the maximum time spent doing layout for a render or redraw. Set to 0 for no limit.

Parameters:
Name Type Argument Default Description
timeLimit function | Number <optional>
 0
Source:
Returns:

transitionDuration( [transitionDuration])

Gets or sets the transition duration, the length of time each change to the diagram will be animated.

Parameters:
Name Type Argument Default Description
transitionDuration Number <optional>
 500
Source:
Returns:

width( [width])

Set or get the width attribute of the diagram. If a value is given, then the diagram is returned for method chaining. If no value is given, then the current value of the width attribute will be returned.

The width and height are applied to the SVG element generated by the diagram on render, or when resizeSvg is called.

If the value is falsy or a function, the width will be calculated the first time it is needed, using the provided function or default width calculator, and then cached. The default calculator uses the client rect of the element specified when constructing the chart, with a minimum of minWidth. A custom calculator will be passed the element.

If the value is 'auto', the width will be calculated every time the diagram is drawn, and it will not be set on the <svg> element. Instead, the element will be pinned to the same rectangle as its containing div using CSS.

Parameters:
Name Type Argument Default Description
width Number <optional>
 200
Source:
Returns:

x( [scale])

Standard dc.js baseMixin method. Gets or sets the x scale.

Parameters:
Name Type Argument Description
scale d3.scale <optional>
Source:
Returns:

y( [scale])

Standard dc.js baseMixin method. Gets or sets the y scale.

Parameters:
Name Type Argument Description
scale d3.scale <optional>
Source:
Returns: