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

问题描述

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

I'm trying to have a stacked bar chart and remove empty bins, the bar chart doesn't seem to display properly. It's adding whitespace within the bars themselves. The filtering is working fine.

看看这个小提琴可能是最好的解释 -

Probably best explained by having a look at this fiddle -

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

我的过滤器看起来像这样

My filters look like this

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

我做错了什么吗?

推荐答案

哇，这是非常糟糕的行为.这里发生的事情是堆栈 mixin 不喜欢每个堆栈都有不同的一组不同的 X 值.如果未使用 remove_empty_bins，图表显示正常(如@Cyril 的回答所示，只是禁用了它).

Wow, that is pretty awful behavior. What is going on here is that the stack mixin doesn't like having different a different set of X values for each stack. The chart displays fine if remove_empty_bins is not used (as demonstrated by @Cyril's answer, which just disables it).

删除一组组中的空 bin 并使它们都具有相同的 bin 是一个更困难的问题.这个数据集并没有真正证明这个问题，因为所有垃圾箱都被至少一个组使用，并且 remove_empty_bins 在这里没有帮助，但我想我明白你在找什么

It's a more difficult problem to remove empty bins across a set of groups and make them all have the same bins. The problem isn't really demonstrated by this data set, because all the bins are used by at least one group, and the remove_empty_bins isn't helpful here, but I think I get what you're looking for.

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

I think the "easiest" thing to do is to create a combined group with all the data and then use accessors for the stacks:

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/

这篇关于dc.js - 带有空 bin 过滤器的堆叠条形图以奇怪的方式显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！