Question

是否可以使用Dc.js绘制分组条形图？

这是我的数据样本（CSV）：

English_GPA,English_level,GPA,Total_Distance,Math_GPA,Math_level
2.533333333,C+,3.27,53,3.825,A-
2.85,B-,2,92,1.425,D+
1.766666667,C-,2.81,42,2.675,B-
2,C,2.33,92.5,2.925,B-
1,D,1.43,16,0.666666667,F
2.666666667,C+,1.88,147,1.675,C-
2.866666667,B-,3.49,42,3.175,B
1.65,D+,2.11,67,1,D
3.9,A-,2.31,42,1.9,C-
1,D,2.34,32,2.9,B-
2,C,2,49,1.675,C-
2.3,C,1.91,37.5,2,C
1.7,C-,2.14,7,0.85,F
3.2,B,3.38,43,3.4,B+

我是该库的初学者，我想计算GPA的平均值，然后将其放在y轴上，并将（English_level和Math_level）放在x轴上，那么这个库可以吗？

我尝试使用带有2维的compositeChart，但它对我不起作用..

这是我的尝试：

function grid (selector,data) {
  var ndx = crossfilter(data),
      all = ndx.groupAll();

  var bar_Math_level = dc.compositeChart(selector + " .Math_level");
  var bartry = dc.barChart(selector + " .English_level");
  var Math_level = ndx.dimension(function(d) {
      if (typeof d.Math_level == "undefined") return "";
      return d.Math_level;
      });
  var English_level = ndx.dimension(function(d) {
      if (typeof d.English_level == "undefined") return "";
      return d.English_level;
      });
  var Math_levelGroup1   = Math_level.group().reduce(
  function(p, v) {
    ++p.count;
        p.total += v.GPA;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        };
        return p;
  },
  function (p, v) {

   --p.count;
        p.total -= v.GPA;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        };
        return p;
  },
  function (p, v) {
     return {
            count: 0,
            total: 0,
            average: 0
        };
  }
);

var English_levelGroup2   = English_level.group().reduce(
  function(p, v) {

   ++p.count;
        p.total += v.GPA;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        };
        return p;
  },
  function (p, v) {

   --p.count;
        p.total -= v.GPA;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        };
        return p;
  },
  function (p, v) {
     return {
            count: 0,
            total: 0,
            average: 0
        };
  }
);



  bar_Math_level
    .width(650)
    .height(200)
    .dimension(Math_level)
  .group(Math_level.group())

  .compose([
    dc.barChart(bar_Math_level)
      .dimension(Math_level)
      .gap(50)
      .group(Math_levelGroup1, 'Math', function(d) {
        return d.value.average;
      })
      .colors('red'),
    dc.barChart(bartry)
      .dimension(English_level)
      .outerPadding(0)

      .group(English_levelGroup2, 'English', function(d) {
        return d.value.average;
      })
      .outerPadding(0)
      .gap(80)
      .colors('blue')
  ])

  .yAxisLabel('Total_GPA')

  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)

  .xAxisLabel('Level');
bar_Math_level.render();

dc.renderAll();
}

这里有我得到的：

我想做其中一个：

如果不可能，我可以使用另一个库并将其与另一个dc.js图表连接？怎么样？

Answer 1

此功能有两个拉取请求。请尝试其中一个或两个，并根据您的经验在PR中发表评论：

https://github.com/dc-js/dc.js/pull/1043

https://github.com/dc-js/dc.js/pull/984

编辑：我已经在自己的分支机构上构建了每个提议的PR，并添加了下载ZIP的说明。

是否可以使用Dc.js绘制分组条形图？

1 个答案: