更好地控制 NVD3 工具提示

Question

我正在使用堆积面积图在时间轴上绘制多个系列。所有系列都有不同的开始和结束时间。在系列范围之外，所有值都为零。问题是对于任何给定的 x 值，工具提示显示所有系列的值，这使得它非常混乱且难以阅读。有没有办法隐藏零条目？

Answer 1

根据您所写的文字，我假设您想要控制工具提示内容。

为此，您有一个 contentGenerator 函数，您可以通过该函数控制工具提示内容。更多描述：

For tooltip：生成工具提示内容的函数html。这取代了大多数图表上的 'tooltipContent' 选项。请注意，传递给此函数的数据通常因图表而异，因此您可能需要 console.log() 输入对象。此外，传递的数据现在始终是单个对象，因此必须相应地调整以前为 tooltipContent 选项编写的函数。

来源：http://nvd3-community.github.io/nvd3/examples/documentation.html#tooltip

Answer 2

终于找到解决办法了。这是为了完整性：

var contentGenerator = chart.interactiveLayer.tooltip._options.contentGenerator;
chart.interactiveLayer.tooltip.contentGenerator(function(o) {
    var content = contentGenerator(o);
    var content = $(content);

    content.find('td.value')
          .filter(function() {
              return ["0", "0.0%"].indexOf($(this).text()) >= 0 
           })
          .parent().remove();

    return content[0].outerHTML;
});

不太高兴使用 _options，但如果有人有更好的解决方案，请告诉我。

更好地控制 NVD3 工具提示

finer control over NVD3 tooltip

d3.js

nvd3.js