dc.js

Question

我正在尝试制作堆叠条形图并删除空箱，条形图似乎无法正确显示。它在条形图本身内添加了空格。过滤工作正常。

看看这个 fiddle -

可能是最好的解释

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

问题是因为在数据中 philip 的金额 =0。在你的函数中，你过滤了 value = 0

的记录

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

因此函数 personDimGroup_filtered_group.all() 应该 return philip、steve 和 robert 各有 3 个值，但它 returns 2 即 steve 和 robert 因为 philip 的值为 0 ，因此堆栈条形图中断。

代码应该是：

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

工作 fiddle 在这里：http://jsfiddle.net/cyril123/xdcvr2kf/4/

Answer 2

哇，这行为太糟糕了。这里发生的事情是堆栈混合不喜欢为每个堆栈设置不同的一组不同的 X 值。如果未使用 remove_empty_bins，则该图表显示正常（正如@Cyril 的回答所证明的那样，它只是禁用它）。

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

我认为 "easiest" 要做的是创建一个包含所有数据的组合组，然后对堆栈使用访问器：

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());

你的 fiddle 的工作叉：http://jsfiddle.net/gordonwoodhull/uwczq9n1/5/

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

dc.js - Stacked bar chart with empty bin filter displaying in strange way

d3.js

crossfilter