如何隐藏dc.js行图表中值为零的数值

Question

我们如何在过滤后隐藏值为零的行图表？我们有以下代码：

    var kurum=data.dimension(function(d){return ""+ d.KURUM;});
    var kurumGroup=kurum.group().reduceSum(function(d){return +d.INSIDANS});

    kurumRowMapChart
                    .width(300)
                    .height(200)
                    .margins({top: 5, left: 10, right: 10, bottom: 20})
                    .dimension(kurum)
                    .group(kurumGroup)
                    .colors(d3.scale.category10())
                    .elasticX(true)
                    .ordering(function(d) { return -d.value })
                    .xAxis().ticks(4);

这段代码正常工作，但是当有筛选器并且值等于零时，我们希望将其隐藏。谢谢。

- coder

Answer 1

您可以创建一个“虚假组”，当调用.all()时，它会删除包含零的箱子：

function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value != 0;
            });
        }
    };
}

使用如下方式：

var filtered_group = remove_empty_bins(kurumGroup);

kurumRowMapChart.dimension(kurum)
    .group(filtered_group)
    ...

https://github.com/dc-js/dc.js/wiki/FAQ#remove-empty-bins

这个想法是创建一个对象，位于 crossfilter 和 dc.js 之间，它看起来像 crossfilter group，并在需要时对其进行过滤。

下面是一个有点复杂的示例，旨在测试不同数量条形图之间的转换：

http://dc-js.github.io/dc.js/transitions/ordinal-row-transitions.html

（目前的转换效果不太好，但它很好地演示了 remove_empty_bins。）

- Gordon

---

谢谢您的回答。但是我已经尝试过了，它不起作用。我们在哪里可以找到任何关于这个的例子？ - coder

@Chris，谢谢，我已经让这个答案独立存在并修复了链接。 - Gordon

哎呀，现在我的回复被踩了？哇，这群人真难搞。我已经改变了变量名，以使它更清晰地适用于原始代码。 - Gordon

@Gordon，感谢您的示例。一旦过滤器被移除，有什么方法可以恢复行呢？ - Cameron Yick

这应该只删除值为零的箱子，一旦它们变成非零值，它们将被恢复。这是因为每次重绘都会调用 group.all()。 - Gordon

Answer 2

@Gordon：非常好的答案！remove_empty_bins() 对我有用！:)

我不得不使用 d.value.count 而不是 d.value，但我认为这取决于您使用的组合约简函数：

return d.value.count !== 0;

- Marcel Schürmann