堆疊從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(); 

你需要玩的造型......當不透明度降低時，藍色和紅色組合成紫色。