堆叠从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来解释这个：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();

你需要使用造型......当不透明度降低时，蓝色和红色结合成紫色。