D3.js 分组条形图dc.js

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

图表以d3 js存在；使用dc.js实现的任何帮助都将非常有用。我已经经历了很多，但它们并不完整

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

我的数据如下

我想用apo\u loc作为X轴和命中率作为Y轴按进程日期分组，但我无法实现。我已经完成了

命中计数

，

未命中计数

和

总计

和日期。请帮助我使用

命中率

，

系统

和日期来完成此操作

    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;
    });

---

这方面有一个公关，看起来不错，但我还没有机会彻底审查。请试一试，并在票子上留下您的评论！谢谢Gordon，它成功了，但我在制作堆栈时遇到了困难，我已经在上面的票子中添加了。请描述您遇到的问题。仅仅说它不完整并不能描述问题。特别是，PR#984有帮助吗？我认为这是最完整的实现（我不完全相信问题558中的代码）。PR#984非常有用，我附上了上面数据中的需求图像…嗯，你可能会遇到聚合百分比以响应过滤器的问题-你可能想动态计算这些百分比。然后，只要每个apo_loc的日期数相同，它就应该有效。按日期聚合就像这样的常见问题：有一个公共关系，这看起来不错，但我还没有机会彻底审查。请试一试，并在票子上留下您的评论！谢谢Gordon，它成功了，但我在制作堆栈时遇到了困难，我已经在上面的票子中添加了。请描述您遇到的问题。仅仅说它不完整并不能描述问题。特别是，PR#984有帮助吗？我认为这是最完整的实现（我不完全相信问题558中的代码）。PR#984非常有用，我附上了上面数据中的需求图像…嗯，你可能会遇到聚合百分比以响应过滤器的问题-你可能想动态计算这些百分比。然后，只要每个apo_loc的日期数相同，它就应该有效。按日期聚合类似于以下常见问题：