dc.js - 过滤后从堆叠条形图中删除空箱
dc.js - Remove empty bins from stacked bar chart upon filtering
这是堆叠条形图的 fiddle。此图表筛选另一个折线图。
为了移除空垃圾箱,我尝试了 dc.js FAQ, this example and 。
我看到了 and 堆叠条形图场景,但我的分组不同。
我尝试了不同的方法,但无法正常工作。
很确定我遗漏了一些简单的东西。
请检查我的代码。难道我做错了什么?我如何让 remove_empty_bins() 工作?
var stack = dc.barChart('#stack');
var XDimension = ndx.dimension(function (d) {return d.no;});
var YDimension_before = XDimension.group().reduce(
function(p, d) {
p[d.sub_no] = (p[d.sub_no]|| 0) + +d.avg;
return p;
},
function(p, d) {
p[d.sub_no] = (p[d.sub_no]|| 0) - +d.avg;
return p;
},
function() {
return {};});
var YDimension = remove_empty_bins(YDimension_before);
stack.width(550)
.height(400)
.dimension(XDimension)
.group(YDimension, '1', sel_stack(1))
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.x(d3.scaleBand())
.margins({left: 80, top: 20, right: 80, bottom: 80})
.brushOn(false)
.clipPadding(20)
.elasticX(true)
.elasticY(true)
.title(function(d) {
return [ d.key + '[' + this.layer + '] ',
d.value[this.layer]].join('\n')
});
stack.stack(YDimension, '2', sel_stack(2))
.stack(YDimension, '3', sel_stack(3))
function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return d.value != 0;
});
}
};
}
我认为问题是你正在减少到一个对象,所以 d.value
永远不会等于零。
您可以使用 Object.values and Array.some 检查每个 bin 是否有任何堆栈不为零:
function remove_competely_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return Object.values(d.value).some(v => v!=0);
});
}
};
}
警告:如果不同的堆栈没有相同的 x 值,dc.js 会不高兴。所以这就是为什么您不想只删除空堆栈的原因。只有当所有堆栈都为零时才移除垃圾箱。
这是堆叠条形图的 fiddle。此图表筛选另一个折线图。
为了移除空垃圾箱,我尝试了 dc.js FAQ, this example and
我看到了
很确定我遗漏了一些简单的东西。
请检查我的代码。难道我做错了什么?我如何让 remove_empty_bins() 工作?
var stack = dc.barChart('#stack');
var XDimension = ndx.dimension(function (d) {return d.no;});
var YDimension_before = XDimension.group().reduce(
function(p, d) {
p[d.sub_no] = (p[d.sub_no]|| 0) + +d.avg;
return p;
},
function(p, d) {
p[d.sub_no] = (p[d.sub_no]|| 0) - +d.avg;
return p;
},
function() {
return {};});
var YDimension = remove_empty_bins(YDimension_before);
stack.width(550)
.height(400)
.dimension(XDimension)
.group(YDimension, '1', sel_stack(1))
.transitionDuration(500)
.xUnits(dc.units.ordinal)
.x(d3.scaleBand())
.margins({left: 80, top: 20, right: 80, bottom: 80})
.brushOn(false)
.clipPadding(20)
.elasticX(true)
.elasticY(true)
.title(function(d) {
return [ d.key + '[' + this.layer + '] ',
d.value[this.layer]].join('\n')
});
stack.stack(YDimension, '2', sel_stack(2))
.stack(YDimension, '3', sel_stack(3))
function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return d.value != 0;
});
}
};
}
我认为问题是你正在减少到一个对象,所以 d.value
永远不会等于零。
您可以使用 Object.values and Array.some 检查每个 bin 是否有任何堆栈不为零:
function remove_competely_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return Object.values(d.value).some(v => v!=0);
});
}
};
}
警告:如果不同的堆栈没有相同的 x 值,dc.js 会不高兴。所以这就是为什么您不想只删除空堆栈的原因。只有当所有堆栈都为零时才移除垃圾箱。