-
Notifications
You must be signed in to change notification settings - Fork 0
The entire dc.js library is scoped under dc name space. It does not introduce anything else into the global name space.
Majority of dc functions are designed to allow function chaining, meaning it will return the current chart instance whenever it is appropriate. Therefore configuration of a chart can be written in the following style.
chart.width(300)
.height(300)
.filter("sunday")The API references will highlight the fact if a particular function is not chainable.
Base chart is an abstract functional object representing a basic dc chart object for all chart and widget implementation. Every function on base chart are also inherited available on all concrete chart implementation in dc library.
Set or get width attribute of a chart. If the value is given, then it will be used as the new width.
If no value specified then value of the current width attribute will be returned.
Set or get height attribute of a chart. If the value is given, then it will be used as the new height.
If no value specified then value of the current height attribute will be returned.
Set or get dimension attribute of a chart. In dc a dimension can be any valid crossfilter dimension. If the value is given, then it will be used as the new dimension.
If no value specified then the current dimension will be returned.
Set or get group attribute of a chart. In dc a group is a crossfilter group. Usually the group should be created from the particular dimension associated with the same chart. If the value is given, then it will be used as the new group.
If no value specified then the current group will be returned.
Clear all filters associated with this chart.
Execute in scope d3 single selection using the given selector and return d3 selection result. Roughly the same as:
d3.select("#chart-id").select(selector);This function is not chainable since it does not return a chart instance; however the d3 selection result is chainable from d3's perspective.
Execute in scope d3 selectAll using the given selector and return d3 selection result. Roughly the same as:
d3.select("#chart-id").selectAll(selector);This function is not chainable since it does not return a chart instance; however the d3 selection result is chainable from d3's perspective.
Returns the root element where a chart resides. Usually it will be the parent div element where svg was created. You can also pass in a new root element however this is usually handled as part of the dc internal. Resetting root element on a chart outside of dc internal might have unexpected consequences.
Returns the top svg element for this specific chart. You can also pass in a new svg element however this is usually handled as part of the dc internal. Resetting svg element on a chart outside of dc internal might have unexpected consequences.
Set or get filter printer function. Filter printer function is used to generate human friendly text for filter value(s) associated with the chart instance. By default dc charts shipped with a default filter printer implementation dc.printers.filter that provides simple printing support for both single value and ranged filters.
Turn on/off optional control elements within the root element. dc.js currently support the following html control elements.
- root.selectAll(".reset") elements are turned on if the chart has an active filter. This type of control elements are usually used to store reset link to allow user to reset filter on a certain chart. This element will be turned off automatically if the filter is cleared.
- root.selectAll(".filter") elements are turned on if the chart has an active filter. The text content of this element is then replaced with the current filter value using the filter printer function. This type of element will be turned off automatically if the filter is cleared.
Set or get animation transition duration(in milliseconds) for specific chart instance. Default duration is 750ms.
Invoke this method will force the chart to re-render everything from scratch. Generally it should be only used to render the chart for the first time on the page or if you want to make sure everything is redrawn from scratch instead of relying on the default incremental redrawing behaviour.
Calling redraw will cause the chart to re-render delta in data change incrementally. If there is no change in the underlying data dimension then calling this method will have no effect on the chart. Most of the chart interaction in dc library will automatically trigger this method through its internal event engine, therefore you only need to manually invoke this function if data is manipulated outside of dc's control; for example if data is loaded on a periodic basis in the background using crossfilter.add().
Set or get the key accessor function. Key accessor function is used to retrieve key value in crossfilter group. Key values are used differently in different charts, for example keys correspond to slices in pie chart, bubbles in bubble chart, and x axis value in grid coordinate chart.
// default key accessor
chart.keyAccessor(function(d) { return d.key; });
// custom key accessor for a multi-value crossfilter reduction
chart.keyAccessor(function(p) { return p.value.absGain; });Color chart is an abstract chart functional class created to provide universal coloring support as a mix-in for any concrete chart implementation.
Retrieve current color scale or set a new color scale. This function accepts both d3 color scale and arbitrary color array. By default d3.scale.category20c() is used.
// color scale
chart.colors(d3.scale.category20b());
// arbitrary color array
chart.colors(["#a60000","#ff0000", "#ff4040","#ff7373","#67e667","#39e639","#00cc00"]);Set or get color accessor function. This function will be used to map a data point on crossfilter group to a specific color value on the color scale. Default implementation of this function simply returns the next color on the scale using the index of a group.
// default index based color accessor
.colorAccessor(function(d, i){return i;})
// color accessor for a multi-value crossfilter reduction
.colorAccessor(function(d){return d.value.absGain;})Set or get the current domain for the color mapping function. This allows user to provide a custom domain for the mapping function used to map the return value of the colorAccessor function to the target color range calculated based on the color scale.
// custom domain for month of year
chart.colorDomain([0, 11])
// custom domain for day of year
chart.colorDomain([0, 364])Single selection chart is an abstract functional class created to provide cross-chart support for single value filtering capability.
Filter the chart by the given value or return the current filter if the input parameter is missing.
// filter by a single string
chart.filter("Sunday");
// filter by a single age
chart.filter(18);Check whether is an active filter associated with particular chart instance. This function is not chainable.
Stackable chart is an abstract chart introduced to provide cross-chart support of stackability. Concrete implementation of charts can then selectively mix-in this capability.
Stack a new crossfilter group into this chart with optionally a custom value retriever. All stacks in the same chart will share the same key accessor therefore share the same set of keys. In more concrete words, imagine in a stacked bar chart all bars will be positioned using the same set of keys on the x axis while stacked vertically.
// stack group using default accessor
chart.stack(valueSumGroup)
// stack group using custom accessor
.stack(avgByDayGroup, function(d){return d.value.avgByDay;});