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

d3.js NVD3 trigger tooltip manually

本文关键字：工具提示 js NVD3 d3      更新时间：2023-09-26

我有一个柱状图和一个表格，使用相同的数据。我想这样做，当我将鼠标悬停在表格中的一个单元格上时，图形中相应的栏将突出显示并显示工具提示。我很难找到一种方法来手动触发工具提示显示。。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();
    });
});

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

下面是我如何显示/隐藏/移动我的自定义图表的工具提示(基于其他nvd3图表)版本1.8.1:

tooltip = nv.models.tooltip();
// config...
tooltip
    .headerEnabled(false)
    .duration(0)
    .valueFormatter(function(d, i) {
        return packedBubble.valueFormat()(d, i);
    });

…

packedBubble.dispatch.on('elementMouseover.tooltip', function(evt) {
    evt['series'] = {
        key: evt.data.name,
        value: evt.data,
        color: evt.color
    };
    tooltip.data(evt).hidden(false);
});
packedBubble.dispatch.on('elementMouseout.tooltip', function(evt) {
    tooltip.hidden(true);
});
packedBubble.dispatch.on('elementMousemove.tooltip', function(evt) {
    tooltip.position({ top: d3.event.pageY, left: d3.event.pageX })();
});

所以只要使用chart.tooltip，如果你在图表之外，以同样的方式操作它与hidden()/position()/data()。

相关文章：