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

是否可以用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的平均值,然后把它放在x轴上,(英文级别和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图? 如何?

有这个function的两个拉请求。 请尝试一个或两个,并与您的经验评论PR:

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

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

编辑:我build立了每个build议在他们自己的分支机构的PR,并添加了下载ZIP的说明。