在NVD3 multiBarHorizo​​ntalChart中禁用0值的工具提示

Question

我正在使用nvd3作为multiBarHorizo​​ntalChart，我需要有关如何禁用0值的工具提示的指导。

.tooltip(function(key, x, y, e) {
    return '<h3>' + key + ' ' + e.point.label + '</h3>' + '<p>' + y + '</p>';
})

此功能我用于显示工具提示值。

Answer 1

不幸的是，我没有找到任何非黑客的方法来做到这一点。

不那么优雅的方法是将事件tooltipShow的原始处理程序替换为自定义处理程序，它将检查值：

var originalTooltipHandler = chart.dispatch.on("tooltipShow");
chart.dispatch.on("tooltipShow", function (e) {
    // check whatever you like here
    if (e.value != 0) {
        // and call original handler only when needed
        originalTooltipHandler.apply(this, arguments);
    }
});

但是，如果您的图表已更新（例如，您希望resize事件或允许通过点击图例来更改显示的数据，那么这是不够的，所以几乎在所有情况下），因为执行chart.update()时，它将恢复原始的tooltipShow处理程序。要解决此问题，我们也必须覆盖chart.update()：

nv.addGraph(function () {
    chart = nv.models.multiBarHorizontalChart()
        // ... parameters setting here
    // before data was set, `chart.update()` is not available
    d3.select('#chart1 svg')
        .datum(long_short_data)
        .call(chart);
    // now we can override
    filterTooltips(chart, function (e) {
       return e.value !== 0;
    });
    // ...
    return chart;

    function filterTooltips(chart, predicate) {
        var originalUpdate = chart.update;
        chart.update = function () {
            // call to original `update()` will reset filter
            originalUpdate.apply(this, arguments);
            // set custom filter again
            filterTooltips(chart, predicate);
        };

        var originalTooltipHandler = chart.dispatch.on("tooltipShow");
        chart.dispatch.on("tooltipShow", function (e) {
            if (predicate(e)) {
                originalTooltipHandler.apply(this, arguments);
            }
        });
    }
});

请参阅live demo。