Question

我正在使用来自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]
  };
});
});
....

如何将这个瀑布逻辑实现到堆积条形图中，以便我可以实现看起来像图像中堆积条形瀑布图的东西？

如何在D3.js中创建堆积条形瀑布图？

0 个答案: