我需要显示带有过滤功能的分组条形图 . 我在我的项目中使用dc和交叉过滤器 .

该图表存在于d3 js http://bl.ocks.org/mbostock/3887051;任何与dc.js一起实现的帮助都会很棒 . 我已经完成Multi-series bar chart in DC-js和https://github.com/dc-js/dc.js/issues/558，但它们并不完整 .

我的要求是日期将是组，系统将是X轴，而命中点将是Y轴 .

我的数据如下 .

data example

我想用 apo_loc as X axis 和 hit_percentage as Y axis 制作 group by process_date ，但我无法实现它 . 我为 hit_count ， miss_count 和 total 做了日期 . 请用 hit_percentage ， system 与日期帮助我这样做 .

var dim = this.ndx.dimension(dimFun);
    var grp = dim.group().reduce(
            function (p, v) {
                p.hit_count += +v.hit_count;
                p.miss_count += +v.miss_count;
                p.total += +v.total;
                return p;
            },
            function (p, v) {
                p.hit_count -= +v.hit_count;
                p.miss_count -= +v.miss_count;
                p.total -= +v.total;
                return p;
            },
            function () {
                return {
                    hit_count: 0,
                    miss_count: 0,
                    total:0
                };
            }
      );

    bar.margins({
        top: 20,
        left: 30,
        right: 10,
        bottom: 20
    })
    .width(barWidth)
    .height(barHeight)
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .brushOn(false)
    .dimension(dim)
    .renderLabel(true)
    .renderType("group")
     .group(grp, "Hit Point")
    .valueAccessor(function (d) {
        return d.value.hit_count;
    })
    .stack(grp, "Miss Point", function (d) {
        return d.value.miss_count;
    })  .stack(grp, "Total", function (d) {
        return d.value.total;
    });

enter image description here

d3.js dc.js