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

我有一个条形图和一个表格，它们是用相同的数据制作的。我希望这样，当我将鼠标悬停在表格中的某个单元格上时，图形中相应的栏将高亮显示并显示工具提示。我很难找到手动触发工具提示的方法。正确条上的触发器（'hover'）、.trigger（'mouseover'）和.trigger（'mouseenter'）不执行此操作

---

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

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

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

我只是通过搜索代码才知道怎么做。我找不到任何文档

下面是我需要解决的情况的高级示例（使用jQuery在图例标签上显示工具提示）：

$（“#chart svg.nv series.nv legend text”）。每个（函数（i，elem）{
$（元素）。悬停（函数（）{
var offset=$（this.offset（）；
//数据是传递到d3的对象数组。选择（“图表svg”）。数据（数据）
nv.tooltip.show（[offset.left，offset.top]，“”+数据[i].longlab+”
）；
}，函数（）{
nv.tooltip.cleanup（）；
});
});

---

为了解决您的问题，除了为单个条形图元素选择外，您可能还可以执行类似的操作。

以下是我如何显示/隐藏/移动1.8.1版自定义图表（基于其他nvd3图表）的工具提示：

tooltip = nv.models.tooltip();

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

---

因此，只要使用

chart.tooltip

如果您在图表之外，就可以使用hidden（）/position（）/data（）以相同的方式对其进行操作。

是的，这让我朝着正确的方向前进。我希望我可以让它根据图形中的条形图创建正确的工具提示，但是我可以通过这种方式手动显示相同的信息。只需要比我希望的多一点的代码。@Hankscopio考虑到解决方案使用了一个未记录的方法，这是有道理的。虽然我不知道为什么有人会否决一个在新版本中不起作用的答案；但是这个解决方案仍然适用于OP正在使用的nvd3版本。它是编码解决方案和获取更深入知识的好去处。对过时答案的高投票率具有误导性。答案以前是有效的，但它不再有效（不是因为你的过错），所以它的价值更低。如果您（或OP）要添加此选项适用的版本，则此答案中仍有一些价值，但此信息不在此处。你能补充一下吗？@HankScorpio是的，我同意，但我通常会保留反对票。这个版本在提问时是隐含的。目前，我太忙了，无法调查，即使这个答案在新版本的nvd3中不起作用，我也没有时间调查新版本的答案。其他人显然可以自由选择。

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

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