d3.js - 如何在呈现图表后为 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

你的方法很好，但这里是惯用的 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 仅选择图表内的项目，以避免在页面其他地方出现意外的工具提示。