dc.js - Listening for chart group render
Asked Answered
H

1

8

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?

Hawk answered 16/8, 2014 at 2:58 Comment(0)
I
11

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()

Interpret answered 17/8, 2014 at 17:23 Comment(6)
Thanks! This does seem like the cleanest way. I was going to simply listen to the redraw event on a random one of the dc charts like someone suggested in the dc.js user group, but that is admittedly a bit hackish ;-) I will give it a shot and let you know how it goes.Hawk
I believe there is also .refocusAll() for when the zoom level / focus range is reset on a chart group.Parrnell
And if you want to participate in deregistering your chart you will need to provide a .anchorName() function that returns some kind of guid. I just generate a random integer with Math.random() * 1000000 << 0; in the constructor and save it as a member and I return that from my anchorName. Kind of a home-made _dcFlags identifier. Anything will work its just used as a key to remove it from the registry.Parrnell
Would you please also provide an example? It is difficult to find one...Alphitomancy
@user3329081, sorry for the slow reply. Here is one minimal example. Also you can look at the source for some of the really simple widgets, like the number display, although you don't really need to derive from any of the dc.js base classes in order to be compatible with dc.js.Interpret
added simplest possible example here: dc-js.github.io/dc.js/examples/custom-chart.htmlInterpret

© 2022 - 2024 — McMap. All rights reserved.