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

Question

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

Answer 1

一个可能的答案是在 renderEnd 事件中删除值为 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);

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

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

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

Hide legend items if value is equal to 0 in NVD3.js Pie Chart

javascript

d3.js

nvd3.js