9

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.

Community
  • 1
  • 1
kylerthecreator
  • 1,509
  • 3
  • 15
  • 32
  • 2
    Have you tried adding the tips in a [renderlet](https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#renderletrenderletfunction)? That's usually the best place to post-process the d3-generated stuff. You can have a renderlet per chart to do this. – Gordon Jul 10 '14 at 05:34
  • 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). – kylerthecreator Jul 11 '14 at 03:25

1 Answers1

19

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.

Gordon
  • 19,811
  • 4
  • 36
  • 74
  • In the example, it uses "g.row" for rowChart. Any idea what should be used for lineChart? Thanks. – Wilson Aug 11 '14 at 03:45
  • 4
    Use the source, Luke! https://github.com/dc-js/dc.js/blob/master/src/line-chart.js#L172 – Gordon Aug 11 '14 at 04:08
  • Thanks. Found that I should use d3.selectAll('.dot').call(tip); – Wilson Aug 11 '14 at 06:40
  • 2
    it's also good to namespace the `mouseover` and `mouseout` as described here - https://github.com/dc-js/dc.js/issues/780 – andorov Mar 13 '15 at 16:14