Question

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

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

Answer 1

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

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

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

Answer 2

以下是我为自定义图表（基于其他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 })();
});

如果您在图表外部使用隐藏（）/ position（）/ data（）以相同的方式操作它，请使用chart.tooltip。

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

2 个答案: