DC-js中的多系列条形图

Question

我正在使用DC.js(在D3之上的lib)并且有一个单个系列条形图的一个很好的例子:

 var xf = crossfilter(data);
 var dim = xf.dimension(function (d) { return d["EmployeeName"]; });
 var group = dim.group().reduceSum(function (d) { return d["AverageSale"]; });

 var chart = dc.barChart(elm);
 chart.barPadding(0.1)
 chart.outerPadding(0.05)
 chart.brushOn(false)
 chart.x(d3.scale.ordinal());
 chart.xUnits(dc.units.ordinal);
 chart.elasticY(true);

 chart.dimension(dim).group(group);
 chart.render();

但我想知道是否有可能使用这个库创建一个多维条形图.例如:按商店名称分组,然后按员工分组,然后y轴显示平均销售价值(已由我的后端计算).

数据看起来像:

 [{
    "EmployeeName": "Heather",
    "StoreName" : "Plaza",
    "AverageSaleValue": 200
 }{
    "EmployeeName": "Mellisa",
    "StoreName" : "Plaza",
    "AverageSaleValue": 240
 }, {
    "EmployeeName": "Sarah",
    "StoreName" : "Oak Park",
    "AverageSaleValue": 300
 } ... ]

Answer 1

如果要绘制静态组的数组,则可以使用复合图表实现所需的效果.

在下面的例子中,我硬编码了条形图之间的差距 - 我可以这样做,因为我知道有12个月的显示.

            var actuals = dc.barChart(compositeChart)
                    .gap(65)
                    .group(group)
                    .valueAccessor(function (d) {
                        return d.value.Actual;
                    });

            var budgets = dc.barChart(compositeChart)
                    .gap(65)
                    .group(group)
                    .valueAccessor(function (d) {
                        return d.value.Budget;
                    });

我将这些条形图传递给复合图表的撰写方法:

                compositeChart
                    .width(1000)
                    .height(300)
                    .dimension(monthDimension)
                    .group(group)
                    .elasticY(true)
                    .x(d3.time.scale().domain(timeExtent))
                    .xUnits(d3.time.months)
                    .round(d3.time.month.round)
                    .renderHorizontalGridLines(true)
                    .compose([budgets, actuals])
                    .brushOn(true);

最后,我添加一个renderlet,将其中一个图表向右移动几个像素:

              compositeChart
                    .renderlet(function (chart) {
                        chart.selectAll("g._1").attr("transform", "translate(" + 20 + ", 0)");
                        chart.selectAll("g._0").attr("transform", "translate(" + 1 + ", 0)");
                    });

我知道这不是最干净的方法,但它可以在紧要关头工作.

我希望这有帮助.