d3.js - 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

You just need to implement .redraw() and .render() on some object (your chart or a wrapper), and pass that object as the first argument.

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.

Depending on how the chart is used, you may also have to implement .filterAll() and .anchorName()