d3-tooltips for multiple linked dc.js charts

2019-04-06 05:54发布

问题:

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.

回答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.