nvd3.js 的 lineChart 中的自定义工具提示答案

【问题标题】：Custom tooltip in lineChart of nvd3.jsnvd3.js 的 lineChart 中的自定义工具提示
【发布时间】：2020-11-26 15:09:53
【问题描述】：

如何在 nvd3.js 的 lineChart 中创建自定义工具提示？，我想在工具提示中添加一个“总计”值，如下所示

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

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

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

【问题讨论】：

标签： javascript d3.js nvd3.js

【解决方案1】：

请尝试使用chart.interactiveLayer.tooltip.contentGenerator。用这一行测试你的代码，我可以看到 data 变量中的值，如下所示：

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

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

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

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

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

在这个文件上，如果你在第 83 行检查，只是在文件上搜索“highlight”，你可以看到 event enter() 为表格主体内的所有 tr 元素实现，添加类名 highlight。

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

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

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

【讨论】：

【解决方案2】：

@戴夫·米勒

谢谢先生，如果我没有分享，我也想通了抱歉。我是这样做的\

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

【讨论】：