NVD3 工具提示内容不起作用答案

【问题标题】：NVD3 TooltipContent Does not workNVD3 工具提示内容不起作用
【发布时间】：2014-12-14 16:06:48
【问题描述】：

我正在为我的项目使用 NVD3 库，并且我编写了以下代码。

var chart = nv.models.lineChart()
            .useInteractiveGuideline(true)
            .margin({top: 50, right: 50, bottom: 50, left: 50})
            .tooltipContent(function (key, y, e, graph) {
                console.log("helo");
                return "hello";
            });

预期的输出应该是在鼠标悬停时显示 hello。但我不明白，而是我得到了默认的工具提示。

请让我知道我正在做的错误。

【问题讨论】：

nvd3 piechart.js - How to edit the tooltip? 的可能重复项
我现在明白了 .useInteractiveGuideline(true) 行不正确。它应该是 .useInteractiveGuideline(false)。由于用户2612936在stackoverflow.com/questions/12416508/…上建议的“useInteractiveGuideline”不能存在自定义工具提示
感谢 shabeer90 指向正确的帖子。

标签： tooltip nvd3.js

【解决方案1】：

请您为它创建一个小提琴或 plunkr 好吗？下面是我们项目代码的实现，它返回一个 html 元素并且运行良好：

.tooltipContent(function (key, x, y, e) {
                            if (e.value >= 0) {
                                return '<h3>' + key + '</h3>' +
                                    '<p>' + y + ' at ' + x + '</p>';
                            } else {
                                return '';
                            }
                        });

【讨论】：

【解决方案2】：

现在可以使用自 1.8.1 版 (https://github.com/novus/nvd3/tree/v1.8.1-alpha) 起的带有交互式指南的自定义内容。

chart.interactiveLayer.tooltip.contentGenerator(function(data) {
    return 'this is my custom content';
});

【讨论】：

谢谢。这也适用于 angular-nvd3。 interactiveLayer:{ tooltip: { contentGenerator: function(data) { console.log('tooltip', data); } } }

【解决方案3】：

从nvd3 1.8+版本开始使用方法chart.tooltip.contentGenerator() 而不是.tooltipContent()

例如：

  chart.tooltip.contentGenerator(function(data) {
      return '<p>' + data.point.x + '</p>'
  }

更多信息在这里 - https://github.com/novus/nvd3/issues/1359

【讨论】：