dc.js - 具有以奇怪方式显示的空bin过滤器的堆积条形图 [英] dc.js - Stacked bar chart with empty bin filter displaying in strange way

问题描述

我试图有一个堆叠的条形图，并删除空箱，条形图似乎没有正确显示。它在酒吧本身添加空格。过滤功能正常。

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

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

我的过滤器看起来像这样

  var personDim = ndx.dimension（function（d）{return d.person;}） ; 
 var personDimGroup = peopleDim.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）; 
 
 >解决方案
哇，这是相当可怕的行为。这里发生的是，堆栈混合不喜欢为每个堆栈有不同的X值。如果不使用 remove_empty_bins ，则图表显示正确（如@ Cyril的回答所示，只是禁用它）。
 
 
 
这是一个更困难的问题，删除一个组的空桶，并使它们都有相同的bin。这个数据集没有真正体现这个问题，因为所有的仓都至少被一个组使用，而 remove_empty_bins 在这里是没有用的，但我想我得到你要找的东西。
 
 
 
我认为最简单的事情是创建一个组合的所有数据，然后使用访问器的堆栈： 
  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  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 （d）{return d.value [0];}）
 .stack（combine，2，function（d）{return d.value [1];}）
 .elasticY ）
 .elasticX（true）
 .xUnits（dc.units.ordinal）
 .x（d3.scale.ordinal（））; 
  
你的小提琴的工作叉： http://jsfiddle.net/gordonwoodhull/uwczq9n1/5/  
 
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);
Have I done something wrong?
解决方案
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).

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());    
Working fork of your fiddle: http://jsfiddle.net/gordonwoodhull/uwczq9n1/5/

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