Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3-tooltips for multiple linked dc.js charts

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.

like image 424
kylerthecreator Avatar asked Jul 09 '14 21:07

kylerthecreator


1 Answers

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.

like image 92
Gordon Avatar answered Oct 22 '22 17:10

Gordon