我有多个行图(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。
提前致谢。
最佳答案
你的方法很好，但这里是惯用的 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 仅选择图表内的项目，以避免在页面其他地方出现意外的工具提示。
关于d3.js - 如何在呈现图表后为 dc.js 图表应用工具提示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41488521/