dc.js - Listening for chart group render

Question

I'm trying to refactor some custom d3 code that I wrote to render a series of crossfilter-driven charts by bringing in dc.js.

My main problem is that I have some chart types that are not supported by dc.js (e.g. a Sunburst Partition) and I'm trying to figure out how to render them in conjunction with a dc.js chart group.

Filtering a single dc.js chart will automatically render / redraw all other charts belonging to the same chartGroup. Is it possible to somehow hook into that global re-render event, so that I can re-draw the non-dc charts at the same time?

I understand that there are listeners on each individual chart, e.g. chart.on("postRender", function(chart){...}) but there doesn't seem to be a way to hook into re-rendering a group of charts. Is there a good pattern by which this could be accomplished?

Answer 1

The "right" way to do this is to register your chart in the dc registry with dc.registerChart

https://github.com/dc-js/dc.js/blob/master/src/core.js#L91

Unfortunately this stuff is not currently documented, but there is actually pretty light coupling here. You just need to implement .redraw() and .render() on some object (your chart or a wrapper), and pass it in as the first arg.

Put it in the same group (second arg) as the charts it should respond to.

render() creates the dom elements from scratch, and redraw() updates them when the data changes.

Looks like you may also need to implement a dummy .filterAll() but that's an oversight.

I added an issue to document this stuff:

https://github.com/dc-js/dc.js/issues/676

Please comment there or here if you run into trouble.

EDIT: this is now documented, thanks to Jasmine Hegman. See chartRegistry documentation.