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，工具提示标题将默认隐藏。但是试试这个：

piechartCurrent.tooltip.headerEnabled(false);

这里是它的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 文件中的符号，但没有任何效果。所以我使用了我的原始代码tooltip.contentGenerator。我用 div 对颜色进行了简单的硬编码：
样式.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;
    });