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

Question

我有多个行图(交叉过滤器+ 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);

代码看起来很好用，但是mouseover事件不会自动触发，当页面加载时，工具提示也不会显示出来。

但是，如果我在控制台上运行最后一行(mouseover)，那么一切都按预期运行。

​

​

因此，我的问题是如何确保在页面加载时触发mouseover事件。我尝试了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);
});

event 在图表呈现或重新绘制后触发。add-tip是一个事件名称空间，以避免干扰可能正在监视此事件的任何其他内容。

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

Answer 2

这里似乎与您的需求相似，请检查它。

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

Answer 3

因此，我最终能够通过使用jquery来解决这个问题。看上去有点烦躁，但它能满足我的需要。

基本上，我把d3提示函数的调用强加在html主体的鼠标上。

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);     

})；