The library has been significantly refactored in v5. The code has been arranged around clearer separation of responsibilities. This has enabled fixing long-standing issues and enabled clean support for remote data sources.
The library is distributed in two variants:
In certain cases, however, you would need to upgrade:
compat option. If you were using ES6 modules, you would need to upgrade.compat mode.
Mixing of newer APIs with older ones may produce unexpected results.filterHandler, hasFilterHandler, addFilterHandler and removeFilterHandler. If your code relies on any of these, you would need to upgrade rewrite using newer features.Please raise an issue on GitHub if you run into problems not covered here!
This was introduced in v4. The older function-based methods were deprecated and now have been removed from v5.
Change dc.pieChart(parent, chartGroup) ➙ new dc.PieChart(parent, chartGroup)
Charts now support key/value configuration. This should simplify sharing configuration across charts easier.
For every chart, there is a corresponding interface that covers the list of supported options. For example, the interface for PieChart is IPieChartConf. The configure and conf will refer to this interface.
To use it:
// It will be merged with exisiting configuration
chart.configure({
minHeight: 250,
minWidth: 300
});
// it will return entire configuration
const conf = chart.conf();
// minHeight
chart.conf().minHeight;
List of accessors that have moved to conf:
chart.colorScale(scale). If you were passing an array it should be converted to chart.colorScale(d3.scaleQuantize().range(colorScale)).chart.configure({
titles: {
volume: titleAccessor1,
movement: titleAccessor2
}
})
d => d.xx => () => xThe data related concerns are separated and provided by Data Adaptor classes. This will allow additional flexibility:
DataProviders, are arranged in a class hierarchy with each layer handling a specific need:
See examples folder for complete examples.
Sample snippets:
const quarterChart = new dc.PieChart('#quarter-chart', chartGroup);
quarterChart.dataProvider(
new dc.CFSimpleAdapter({
dimension: quarter,
group: quarterGroup,
})
);
const chart = new dc.PieChart('#pie01', chartGroup);
chart.dataProvider(
new dc.CFDataCapHelper({
cap: 4,
dimension: runDimension,
group: speedSumGroup,
})
);
const moveChart = new dc.LineChart('#monthly-move-chart', chartGroup);
moveChart.dataProvider(
new dc.CFMultiAdapter({
dimension: moveMonths,
layers: [
// Add the first layer of the stack with group. The `name` is used for label in legends.
{
group: indexAvgByMonthGroup,
name: 'Monthly Index Average',
valueAccessor: d => d.value.avg,
},
{
// Stack additional layers with `.stack`. The first paramenter is a new group.
// The second parameter is the series name. The third is a value accessor.
group: monthlyMoveGroup,
name: 'Monthly Index Move',
valueAccessor: d => d.value,
},
],
})
);
dimesnion, group and valueAccessor. Please see ICFSimpleAdapterConf for all possible options.cap. Please see ICFDataCapHelperConf for all possible options.dimension and layers. Please see ICFMultiAdapterConf for all possible options. Also check the example above.ChartGroup is a key concept in dc.
This links all charts so that filtering one of the charts causes updates in all linked charts.
Up to dc@v4 ChartRegistry maintained these lists as global variables.
This required deregisterAllCharts to be called to clear those references so that charts could be garbage collected.
dc@v5 introduces ChartGroup, an instance of ChartGroup maintains list of all related charts.
References to charts are no longer kept in global variables, so as soon as the chartObject instance
and all chart instances go out of scope, these should get garbage collected without needing an explicit call to
clear the list.
It is recommended that a chartGroup is explicitly created for better code structuring.
If a chartGroup is not explicitly passed during chart creation,
the instances will be linked to the default chartGroup, which is a global object.
In either case the chartGroup is available as an attribute in each of charts.
Example for ChartRegistry to ChartGroup
Generated using TypeDoc