如何在呈现图表后为 dc.js 图表应用工具提示

Question

我有多个行图表 (crossfilter + dc)，我想使用 d3-tip 自定义工具提示。

所以基本上相关的代码是：

rowtip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function (d) { return d.key + ": "  + d.value; });

...my dc charts ...

... then at the bottom of my script tags ...

d3.selectAll('g.row').call(rowtip);
d3.selectAll('g.row').on('mouseover', rowtip.show);

代码似乎有效，但鼠标悬停事件不会自动触发，并且在页面加载时不会显示工具提示。

但是如果我运行控制台上的最后一行（鼠标悬停），那么一切都会按预期进行。

所以我的问题是如何确保在页面加载时触发鼠标悬停事件。我尝试了 Jquery $(document).ready(....)，但没有用。

它必须与元素加载的顺序有关...我猜。但我不是 javascript 方面的专家，更不是 d3 方面的专家。

提前致谢。

Answer 1

这里好像和你的要求差不多，查一下

http://bl.ocks.org/phil-pedruco/9032348

Answer 2

所以我终于能够通过使用 jquery 来解决这个问题。看起来有点老套，但它满足了我的需要。

基本上我是在鼠标悬停在 html 正文上时强制调用 d3-tip 函数。

var rowtip = d3.tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d){return d.key;}) 

$('body').on('mouseover', function(){

    d3.selectAll('g.row')
        .call(rowtip)
        .on('mouseover', rowtip.show)
        .on('mouseout', rowtip.hide);

});

Answer 3

您的方法很好用，但这是惯用的 dc.js 方法：

chart.on('pretransition.add-tip', function(chart) {
    chart.selectAll('g.row')
        .call(rowtip)
        .on('mouseover', rowtip.show)
        .on('mouseout', rowtip.hide);
});

pretransition event 在图表呈现或重绘后触发。 add-tip 是一个 事件命名空间 以避免干扰可能正在观看此事件的任何其他事物。

chart.selectAll 仅选择图表中的项目，以避免页面其他地方意外出现工具提示。

如何在呈现图表后为 dc.js 图表应用工具提示

How to apply tooltips for dc.js chart after chart is rendered

tooltip

d3.js

crossfilter

dc.js