每个 dc.js 图表的点击事件

Posted 2023-03-22

【中文标题】每个 dc.js 图表的点击事件

【英文标题】：Click events of each dc.js chart

【发布时间】：2015-10-08 16:43:44

【问题描述】：

我正在使用 dc.js 在我的仪表板上显示一些图表。我正在寻找的是处理每个图表的点击事件（例如条形图点击事件、饼图点击事件和范围图表的鼠标向上事件等）并将点击图表的历史保存在数据库中。这样用户在登录后将能够看到用户对任何图表所做的点击。

我已经检查了 dc.js 的点击事件，但我没有得到正确的结果。

有人可以帮我吗？任何帮助将不胜感激。

【参考方案1】：

观看“过滤”事件可能更容易，也更有帮助：

chart.on('filtered.monitor', function(chart, filter) 
    // report the filter applied
);

我说更容易，因为您不必担心观看不同图表的不同事件。更有帮助，因为“过滤”会显示点击的结果而无需进一步处理，因此您可以显示实际查看的内容，而不仅仅是点击的内容。

.monitor 在上面的例子中是一个事件命名空间。你可以在那里使用任何你想要的字符串，但一定要使用一些命名空间以避免踩到同一事件的其他观察者。

如果你真的想要点击事件，你可以覆盖 chart.onClick 通过分配给它并调用旧的处理程序 (yuck)，或者你可以使用例如

chart.selectAll('rect.bar').on('click.monitor', ...)

但现在您必须查看来源以确定在每个图表中选择什么。而且这里的命名空间是必不可少的，因为您不想干扰内部事件处理。

【讨论】：

感谢您的回复。但是过滤的事件对我不起作用，因为我要显示的是 1. 单击的图表的名称 2. 显示在渲染之前作为图像单击的图表和 3. 显示在渲染后作为图像单击的图表。所以我需要每个图表的 CLICK 事件和 RANGE FILTERED 事件，以防它允许选择范围。你能帮忙吗？

我不明白您为什么不能为此使用过滤事件，但无论如何请阅读我的全部答案；我还展示了如何观看点击事件。