Question

如何在nvd3.js的lineChart中创建自定义工具提示？我想在工具提示中添加一个“ total”值，就像这样

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

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

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

Answer 1

请尝试使用chart.interactiveLayer.tooltip.contentGenerator。用这一行测试代码，我可以观察数据变量中的值，如下所示：

。

从这里您可以根据需要构造或编辑自定义工具提示。让我知道它是否对您有用。

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

通过查看NVD3，我意识到工具提示的contentGenerator包含所有特定代码，可为工具提示添加事件行为。如果您查看原始的工具提示，它将使用名为 highlight 的类来标记聚焦的颜色，但是自定义工具提示尚未实现此事件，并且不会高度突出聚焦的颜色

一旦您为此自定义工具提示编写了自己的代码，我知道这是一个回退，但是似乎实现此目的的唯一方法是重建代码以包括事件行为。也许从NVD3包含的原始代码创建工具提示usign contetGenerator会有所帮助（这就是我要采取的方式，但是由您决定是否要在当前代码中实现）。

如果您想看一下这段代码，请找到您的NVD3版本的 tooltip.js 或访问此GitHub link

在此文件上，如果在第83行进行检查，仅在文件上搜索“ highlight ”，您就会看到事件 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代码都是真实生成的，即使具有相关行为，然后将其覆盖以包含您为标题进行的自定义。

请尝试一下，让我知道您是否可以解决问题。

Answer 2

感谢@Dave Miller！

我添加了此代码，以便“总计”将包含在工具提示中

chart.interactiveLayer.tooltip.contentGenerator(function(data) {
        var dt     = data.value;    
        var series = '';
        var total  = 0;

        $.each(data.series, function(k,v){
            series += '<tr class="nv-pointer-events-none">'+
                            '<td class="legend-color-guide"><div style="background-color: '+v.color+'"></div></td>'+
                            '<td class="key">'+v.key+'</td>'+
                            '<td class="value">'+v.value.toFixed(2)+'</td>'+
                      '</tr>';
            total += v.value;
        });
      
        var head = '<thead>'+
                        '<tr>'+
                            '<th colspan="2"><strong class="x-value">'+dt+'</strong></th>'+
                            '<th>Total: '+total.toFixed(2)+'</th>';
                        '</tr>'+
                   '</thead>';
      
        return '<table class="nv-pointer-events-none">'+
                    head+
                    '<tbody>'+series+'</tbody>'+
                '</table>';
});

这个问题，它不会像这样在工具提示中突出显示聚焦的颜色，

有任何答案可以完全解决此问题吗？呵呵

使用“ chart.interactiveLayer.tooltip.contentGenerator” sample

Answer 3

@Dave Miller

谢谢先生，如果我不分享的话，我也很抱歉。我就是这样\

也许我做了很长的方法，谢谢！

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

3 个答案: