多个链接的 dc.js 图表的 d3-tooltips

Posted 2023-02-22

【中文标题】多个链接的 dc.js 图表的 d3-tooltips

【英文标题】：d3-tooltips for multiple linked dc.js charts

【发布时间】：2014-08-31 02:13:31

【问题描述】：

我正在寻找修改 dc.js 的开箱即用工具提示，似乎有一个使用 d3.js tooltips 的解决方案，如 this question。但是，我对如何实现这一点感到困惑，以便为 dc.js 仪表板中的所有链接图修改工具提示。 GitHub repo 中的示例非常适合单个图表，但我目前正在使用六个链接图表，并且需要修改所有图表上的工具提示。任何帮助，将不胜感激。

【问题讨论】：

您是否尝试在renderlet 中添加提示？这通常是对 d3 生成的内容进行后处理的最佳位置。您可以为每个图表设置一个渲染器来执行此操作。

现在查看 renderlet 功能。在所有示例中似乎都出现了三种方法：.call()、.on('mouseover') 和 .on('mouseout')，我不太确定如何将这些提供给 renderlet 函数（或者如果我需要）。

【参考方案1】：

这是一个使用 d3.tip 和 dc.js 的好例子：

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

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

我会做不同的事情是

在 chart.renderlet(function(chart) ... ) 而不是顶层应用提示（在她的代码末尾）执行 selectAlls，以便它们对图表中的变化做出反应。 使用chart.selectAll 而不是d3.selectAll，以确保您只选择特定图表中的元素而不是整个页面。

希望为 web/examples 或 FAQ 提供一个示例，但现在是 HTH。

【讨论】：

在示例中，它使用“g.row”作为 rowChart。知道线图应该使用什么吗？谢谢。

使用源代码，卢克！ github.com/dc-js/dc.js/blob/master/src/line-chart.js#L172

谢谢。发现我应该使用 d3.selectAll('.dot').call(tip);

按照这里的描述命名 mouseover 和 mouseout 也很好 - github.com/dc-js/dc.js/issues/780