nvd3.js 折线图中的自定义工具提示

Question

如何在 nvd3.js 的折线图中创建自定义工具提示？，我想在工具提示中添加一个“总计”值，类似这样

我尝试调用 chart.tooltip.contentGenerator 来创建自定义工具提示，但数据为空

chart.tooltip.contentGenerator(function(data) {
    console.log(data) //empty
});

我只使用 nvd3 1.8.5 版和 d3 3.5.9 版，这是我的 fiddle：sample

Answer 1

请尝试使用 chart.interactiveLayer.tooltip.contentGenerator。使用此行测试您的代码，我能够观察数据变量中的值，如下所示：

.

从这里您可以根据需要构建或编辑您的自定义工具提示。让我知道它是否适合你。

[编辑 - 包含事件行为的建议]

查看 NVD3 内部，我意识到工具提示的 contentGenerator 包含为工具提示添加事件行为的所有特定代码。如果你看一下原始工具提示，它使用一个名为 highlight 的 class 来标记聚焦颜色，但自定义工具提示有没有实现这个事件，也没有突出重点颜色。

我知道这是倒退，一旦您为这个自定义工具提示编写了自己的代码，但似乎实现此目的的唯一方法是重新构建您的代码以包含事件行为。也许从 NVD3 包含的原始代码开始创建工具提示 usign contetGenerator 会有所帮助（这就是我会采用的方式，但如果您愿意在当前代码上实现它，则取决于您）。

如果您想查看此代码，请找到适合您的 NVD3 版本的 tooltip.js 或访问此 GitHub link

在这个文件中，如果你检查第 83 行，在文件中搜索“highlight”，你可以看到事件 enter() 为 table body 内的所有 tr 元素实现，添加 class名称突出显示.

var trowEnter = tbodyEnter.selectAll("tr")
    .data(function(p) { return p.series})
    .enter()
    .append("tr")
    .classed("highlight", function(p) { return p.highlight});

我的建议是将所有这些代码（我的意思是全部在 contentGenerator 函数内）用于您的自定义 contentGenerator，这样您就可以确保所有 HTML 代码都是按照原始代码生成的，即使有关联的行为，然后覆盖它以包含您为标题所做的自定义。

请试试这个，如果你能设法解决问题，请告诉我。

Answer 2

@戴夫·米勒

谢谢楼主，我也弄明白了，不分享就抱歉了。我这样做\

也许我做了很长的方法，无论如何谢谢！

nvd3.js 折线图中的自定义工具提示

Custom tooltip in lineChart of nvd3.js

javascript

d3.js

nvd3.js