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()函数才能使用默认样式，此时您一直在覆盖默认样式。

如果要覆盖，工具提示中有两个部分。关键和价值。 键是显示图表元素的位置，例如：“财务”

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简单的硬编码颜色：
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编辑图表的toltip：

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;
    });