如何在呈现图表后为 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事件。add-tip是一个事件命名空间，以避免干扰可能正在观看此事件的任何其他内容。

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