javascript - d3.js NVD3 手动触发工具提示

我有一个使用相同数据制作的条形图和一个表格。我想这样做，当我将鼠标悬停在表格中的单元格上时，图表中的相应栏会突出显示并显示工具提示。我很难找到手动触发工具提示显示的方法。 .trigger('hover')、.trigger('mouseover') 和 .trigger('mouseenter') 在正确的栏上不这样做。

如何手动触发工具提示以显示条形图中的特定条形？

最佳答案

您可以通过执行以下操作手动显示工具提示:

nv.tooltip.show([200, 400], '<p>Your content goes here</p>');

然后隐藏工具提示:

nv.tooltip.cleanup();

我只是通过搜索代码才知道如何做到这一点。我找不到任何文档。

这是我需要解决的情况的高级示例(使用 jQuery 在图例标签上显示工具提示):

$("#chart svg .nv-series .nv-legend-text").each(function(i, elem) {
    $(elem).hover(function() {
        var offset = $(this).offset();
        // data is my array of objects passed into d3.select("#chart svg").datum(data)
        nv.tooltip.show([offset.left, offset.top], '<p>' + data[i].longLabel + '</p>');
    }, function() {
        nv.tooltip.cleanup();
    });
});

为了解决您的情况，您可能会做类似的事情，除了选择单个条形元素。

关于javascript - d3.js NVD3 手动触发工具提示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23662844/