nvd3 piechart.js - 如何编辑工具提示？版本 1.8

Question

我正在使用 nvd3 的饼图。最近我将 nvd3 升级到 1.8.1，我需要 overwrite tooltip。这是我的旧版本代码：

piechartCurrent.tooltip.contentGenerator(function (obj) {
        content = '<h3 style="background-color: ';
        content += obj.color + '">';
        content += obj.data.key + '</h3><p>$' +  Math.round(obj.data.y * 100) / 100 + ' ('+ obj.data.symbols +')</p>';
        return content;
    });

看起来像这样：

但我想为工具提示使用新样式：

新工具提示的 html 代码是什么？ 我需要覆盖工具提示，因为我需要一些自定义文本。

编辑：
Jsfiddle example

编辑 2： Jsfiddle with symbols.

Answer 1

如果您使用 NVD3 v1.8.1，工具提示 header 将默认隐藏。但是试试这个：

piechartCurrent.tooltip.headerEnabled(false);

这是一个link到它的source

更新的答案

您需要删除 chart.tooltip.contentGenerator() 功能才能使用默认样式，您一直在覆盖默认样式。

工具提示中有两个部分，如果你想覆盖。键和值。 Key是显示图表元素的地方，例如："Finance"

chart.tooltip.keyFormatter(function (d, i) {
    var symbol = '';

    pieSectorData().forEach(function (entry) {
       // Search data for key and return the symbols
       if (entry.key == d){
           symbol = entry.symbols
       }
    });
    return  d + '(' + symbol + ')'
});

要在工具提示中使用 $ 符号格式化您的值，请使用以下命令：

chart.tooltip.valueFormatter(function (d, i) {
    return '$' + d
});

希望对您有所帮助。

Answer 2

出于某种原因，shabeer90 的回答对我来说根本不起作用。我在 js 文件中是 working/changing 符号，但没有任何效果。所以我使用了我的原始代码tooltip.contentGenerator。我用 div:
简单地硬编码了颜色 style.css:

.square-box {
float: left;
width: 10px;
height: 10px;
margin: 4px;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
}

和 js 来编辑图表的提示：

chart.tooltip.contentGenerator(function (obj) {
        content = '<p><div class="square-box" style="background-color:'+obj.color+';"></div> '+
                obj.data.key +' ('+ obj.data.symbols +') <strong>$' +  Math.round(obj.data.y * 100) / 100 + '</strong> </p>';
        return content;
    });

nvd3 piechart.js - 如何编辑工具提示？版本 1.8

nvd3 piechart.js - How to edit the tooltip? version 1.8

nvd3.js