2016-04-30 12 views
1

Dc.jsを使用してグループ化された棒グラフを描画することはできますか?Dc.jsを使用してグループ化された棒グラフを描画することはできますか?

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+ 

私はその後、y軸に置きGPAの平均を計算すると、そのライブラリで初心者です(English_levelとMath_level)中:ここ

は私のデータのサンプル(CSV)であります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(); 
} 

enter image description here

これらのうちの1つを実行します: enter image description here

別のライブラリを使用して、別のグラフのdc.jsと接続しますか?そしてどうやって?

答えて

2

この機能には2つのプル要求があります。一方または両方を試してみて、あなたの経験を持つのPRにコメントしてください:

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

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

編集:私はジッパーをダウンロードするために、独自の枝や追加された命令の提案のPRのそれぞれを構築しました。

+0

私はJsの初心者や、このライブラリ.. だ私は、コードをダウンロードしたが、私はそれを を使用する方法がわからないあなたがコードを使用して実行する方法についてのコメントを説明したり、追加することができます。.. とありがとうございました –

+0

ブランチを構築し、各PRに命令を追加しました。両方とも試してみてください! – Gordon

+0

ご協力いただきありがとうございます.. –

関連する問題