d3-tooltips for multiple linked dc.js charts

Question

I'm looking to modify the out-of-the-box tooltips for dc.js, and it seems there is a solution using d3.js tooltips as in this question. However, I'm confused about how to implement this so that the tooltip is modified for all linked graphs in a dc.js dashboard. The examples in the GitHub repo lend themselves well to individual graphs, but I'm currently working with six linked graphs and need to modify tooltips on all graphs. Any help would be appreciated.

Bennington

Have you tried adding the tips in a renderlet? That's usually the best place to post-process the d3-generated stuff. You can have a renderlet per chart to do this. – Excommunication

Looking into the renderlet functionality now. There are three methods that seem like they occur in all the examples: .call(), .on('mouseover'), and .on('mouseout') and I'm not quite sure how to feed these to the renderlet function (or if I need to). – Bennington

Answer 1

Here is a good example of using d3.tip with dc.js:

http://saraquigley.github.io/uc-trends/

http://saraquigley.github.io/uc-trends/javascript/expenses_all.js

The things I would do differently are

1. do the selectAlls that apply the tips (at the end of her code) in a chart.renderlet(function(chart) { ... }) instead of at top-level, so that they react to changes in the charts.
2. use chart.selectAll instead of d3.selectAll, for clarity and to be sure that you are only selecting elements in the particular chart rather than across the page.

Hope to work up an example for web/examples or the FAQ but HTH for now.

Excommunication

In the example, it uses "g.row" for rowChart. Any idea what should be used for lineChart? Thanks. – Margo

Use the source, Luke! github.com/dc-js/dc.js/blob/master/src/line-chart.js#L172 – Excommunication

Thanks. Found that I should use d3.selectAll('.dot').call(tip); – Margo

it's also good to namespace the mouseover and mouseout as described here - github.com/dc-js/dc.js/issues/780 – Ballyhoo