我正在使用来自here的D3堆叠条实现并将其扩展为waterfall chart,其中条形图由堆叠条形图组成,而不仅仅是单个类别条形图。
此图片显示了我最终尝试获得的内容: Waterfall Chart with stacked bars image 可以根据此link和Tableau here由Excel完成。
它具有每个时期(2012年,2013年等)的总计算,并且每个条形由各自颜色的两个类别(智能手机和笔记本电脑)组成。瀑布包含类别new
和used
作为添加,returned
作为减法。一个流程可以描述如下:
2012 (laptop + smartphone) + laptops_new + smartphone_new + laptop_used + smartphone_used - (laptop_returned + smartphone_returned) equals 2013 (laptop + smartphone)
要使两个时段之间的条形浮动在地面上,必须编制一个白色条形,其高度与之前的条形相同。这在D3 here中有记录,但只有简单的条形而不是堆叠条形。
D3中显示了这种浮动瀑布图和堆积条形图的逻辑。然而,我在一张图表中将这两者结合起来很困难。
据我所知,使用d.total
计算了某个类别的堆积条形总数。
....
data.forEach(function(d) {
var y0 = 0;
d.ages = color.domain().map(function(name) { return {name: name, y0:
y0, y1: y0 += +d[name]}; });
// Total of stack calculated
d.total = d.ages[d.ages.length - 1].y1;
});
....
为了创建瀑布部分,我可能需要从这里采用一些逻辑
....
data.forEach(function(d) {
//first calculate the starting height for each category
total = 0
totals = {}
for (var i=0; i<categories.length; i++) {
if (i == 3) {
total = total - +d[categories[i]];
totals[categories[i]] = total;
}
else {
totals[categories[i]] = total;
total += +d[categories[i]];
}
}
//then map category name, value, and starting height to each observation
d.formatted = categories.map(function(category) {
return {
name: category,
value: +d[category],
baseHeight: +totals[category]
};
});
});
....
如何将这个瀑布逻辑实现到堆积条形图中,以便我可以实现看起来像图像中堆积条形瀑布图的东西?