如果 NVD3.js 饼图中的值等于 0，则隐藏图例项答案

【问题标题】：Hide legend items if value is equal to 0 in NVD3.js Pie Chart如果 NVD3.js 饼图中的值等于 0，则隐藏图例项
【发布时间】：2017-12-26 06:38:12
【问题描述】：

当返回value 等于0 时，希望从饼图的legend 中隐藏label。谁能指出我在 NVD3.js 中的正确方向？

nv.addGraph(function () {
    var donutChart = nv.models.pieChart()
        .x(function (d) {
            return d.label
        })
        .y(function (d) {
            return d.value
        })

        d3.select("#chart-devices svg")
        .datum(data)
        .transition().duration(1200)
        .call(donutChart);

    nv.utils.windowResize(donutChart.update);
    return donutChart;
});

【问题讨论】：

我认为您能做的最好的事情是删除初步数据项 value = 0。
但是这里是一个试图从图例中删除项目（具有“零”值）的小提琴：jsfiddle.net/beaver71/yt7vrohk
非常感谢@beaver。我收到Cannot read property 'on' of undefined 的错误。我还想知道是否可能添加一个类来隐藏等于0 的图例项。发布的解决方案适用于少数项目，但很多项目存在明显差距。
我的 jsfiddle 上看不到任何错误。分享您的代码
我不知道为什么在你的情况下 renderEvent 处理程序不起作用。于是我把它改成了 setTimeout():jsfiddle.net/beaver71/8hpekad6

标签： javascript d3.js nvd3.js

【解决方案1】：

一个可能的答案是在 renderEnd 事件中删除 value=0 的项目：

chart.dispatch.on('renderEnd', function () {
    console.log("renderEnd");
    d3.selectAll(".nv-legend .nv-series")[0].forEach(function (d) {
        //get the data
        var t = d3.select(d).data()[0];
        // remove item from legend
        if (t.value == 0)
            d3.select(d).remove();
    });
});

另一种可能性是在超时后删除项目：

setTimeout(function () {
    d3.selectAll(".nv-legend .nv-series")[0].forEach(function (d) {
        //get the data
        var t = d3.select(d).data()[0];
        // remove item from legend
        if (t.value == 0)
            d3.select(d).remove();
    });
}, 1);

在这两种情况下，其余项目之间都存在差距。

这是一个小提琴（第一个选项）：https://jsfiddle.net/beaver71/yt7vrohk/

【讨论】：

有什么办法可以填补被移除的图例留下的空白吗？