Question

我正在尝试使用堆积条形图并移除空箱，条形图似乎无法正常显示。它在条形图中添加了空格。过滤工作正常。

可能最好的解释一下这个小提琴 -

http://jsfiddle.net/northside45/xdcvr2kf/

我的过滤器看起来像这样

var personDim = ndx.dimension(function (d) {return d.person;});
var personDimGroup = personDim.group().reduceSum(function (d) { return d.amount; });
var personDimGroup2 = personDim.group().reduceSum(function(d) {return d.amount2;});    
var personDimGroup_filtered_group = remove_empty_bins(personDimGroup);
var personDimGroup2_filtered_group = remove_empty_bins(personDimGroup2);

我做错了吗？

Answer 1

哇，这是非常可怕的行为。这里发生的是堆栈mixin不喜欢为每个堆栈设置不同的X值集合。如果未使用remove_empty_bins，图表显示正常（由@ Cyril的回答证明，它只是禁用它）。

在一组组中移除空箱并使它们都具有相同的箱是一个更难的问题。这个数据集并没有真正证明这个问题，因为所有的bin都被至少一个组使用，而remove_empty_bins在这里没有用，但我想我得到了你想要的东西。 / p>

我认为“最简单”的做法是创建一个包含所有数据的组合组，然后使用堆栈的访问器：

function combine_groups() {
    var groups = Array.prototype.slice.call(arguments);
    return {
        all: function() {
            var alls = groups.map(function(g) { return g.all(); });
            var gm = {};
            alls.forEach(function(a, i) {
                a.forEach(function(b) {
                    if(!gm[b.key]) {
                        gm[b.key] = new Array(groups.length);
                        for(var j=0; j<groups.length; ++j)
                            gm[b.key][j] = 0;
                    }
                    gm[b.key][i] = b.value;
                });
            });
            var ret = [];
            for(var k in gm)
                ret.push({key: k, value: gm[k]});
            return ret;
        }
    };
}

var combined = combine_groups(personDimGroup_filtered_group, personDimGroup2_filtered_group);

barChart
    .width(500)
    .height(250)
    .dimension(personDim)
    .group(combined, "1", function(d) { return d.value[0]; })
    .stack(combined, "2", function(d) { return d.value[1]; })
    .elasticY(true)
    .elasticX(true)
    .xUnits(dc.units.ordinal)
    .x(d3.scale.ordinal());

小提琴的工作叉：http://jsfiddle.net/gordonwoodhull/uwczq9n1/5/

Answer 2

问题是因为在数据中philip的数量= 0。在函数内部，您可以过滤值为0

的记录

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

因此函数personDimGroup_filtered_group.all（）应该为philip，steve和robert返回3个值，但它返回2，即steve和robert，因为对于philip，值为0，因此stackbarchart中断。

代码应该是：

function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return true;
            });
        }
    };
}

工作小提琴就在这里：http://jsfiddle.net/cyril123/xdcvr2kf/4/

dc.js - 带有空箱式过滤器的堆积条形图以奇怪的方式显示

2 个答案: