堆叠从y轴开始的重叠条形图

Question

使用dc.js构建堆叠不重叠的条形图是否可能？目前，我的代码生成图表，看起来像这样：

相反，我想每个堆栈条从y轴的开始，而不是从那里以前的堆栈值结束的值。这可能会导致酒吧重叠，所以增加透明度可能会有所帮助。一个简单的css规则可能在这里工作：

.dc-chart rect.bar { opacity: 0.75; } 

Answer 1

您可能想要构建一个包含每个类别的条形图的复合图表。

你可以建立一组用于在图表中每种颜色是这样的：

 usaGroup = categoryDimension.group().reduceSum(dc.pluck('usa')), 
     russiaGroup = categoryDimension.group().reduceSum(dc.pluck('russia')); 

这里是一个要的jsfiddle这demsonstrate：http://jsfiddle.net/djmartin_umich/nK6K7/

composite 
    .width(400) 
    .height(300) 
    .x(d3.scale.ordinal().domain([1,2,3])) 
    .xUnits(dc.units.ordinal) 
    .yAxisLabel("User Count") 
    .renderHorizontalGridLines(true) 
    .compose([ 
     dc.barChart(composite) 
     .centerBar(true) 
     .gap(100) 
     .colors('red') 
     .dimension(categoryDimension) 
     .group(russiaGroup), 
     dc.barChart(composite) 
     .centerBar(true) 
     .gap(100) 
     .colors('blue') 
     .dimension(categoryDimension) 
     .group(usaGroup)]) 
    .brushOn(false) 
    .render(); 

你需要玩的造型......当不透明度降低时，蓝色和红色组合成紫色。