2016-12-01 6 views
1

私は自分のデータでここからコードhttps://github.com/dc-js/dc.js/blob/develop/web/examples/table-on-aggregated-data.htmlを複製することで、dc.jsの周りに頭を抱えようとしています。結果はこのようなテーブルであることと集計データのdc.jsテーブル

[ 
{"grade": 8, "category": "Math", "rating": 4}, 
{"grade": 8, "category": "English", "rating": 3}, 
{"grade": 8, "category": "Math", "rating": 1}, 
{"grade": 8, "category": "Math", "rating": 3}, 
{"grade": 8, "category": "Science", "rating": 1}, 
{"grade": 9, "category": "Science", "rating": 2}, 
{"grade": 9, "category": "Science", "rating": 5}, 
{"grade": 9, "category": "English", "rating": 5} 
] 

:私のような感じ

9 English 4.00 
8 Science 2.40 

8 English 3 
8 Math 2.67 
8 Science 1 
9 English 5 
9 Science 3.5 

私はこの結果と共に

 var chart = dc.dataTable("#test"); 

     d3.json("test.json", function(error, experiments) { 

      console.log(experiments); 

      var ndx    = crossfilter(experiments), 
      exptDimension = ndx.dimension(function(d) {return +d.grade;}), 
      groupedDimension = exptDimension.group().reduce(
      function (p, v) { 
       ++p.number; 
       p.total += +v.rating; 
       p.category = v.category; 
       p.grade = v.grade; 
       p.avg = (p.total/p.number).toFixed(2); 
       console.log(p); 
       return p; 
      }, 
      function (p, v) { 
       --p.number; 
       p.total -= +v.rating; 
       p.category = v.category; 
       p.grade = v.grade; 
       p.avg = (p.number == 0) ? 0 : Math.round(p.total/p.number).toFixed(2); 
       return p; 
      }, 
      function() { 
       return {number: 0, total: 0, avg: 0, category:"", grade:"", } 
      }), 
      rank = function (p) { return "rank" }; 

      chart 
      .width(768) 
      .height(480) 
      .dimension(groupedDimension) 
      .group(rank) 
      .columns([function (d) { console.log(d); return d.value.grade }, 
      function (d) { return d.value.category }, 
      function (d) { return d.value.avg }]) 
      .sortBy(function (d) { return d.value.avg }) 
      .order(d3.descending) 
      chart.render(); 
     }); 

これを入れています本当にシンプルなものが欠けている。誰に進めるかについての提案はありますか?

ありがとうございました

答えて

1

ええ、それは単純です - またはほとんど単純です。グレードとカテゴリの両方でグループ化するという暗黙的な要件がありますが、グレードのみでグループ化していました。

  p.category = v.category; 

グレードごとに1つのカテゴリしかないと仮定すると、あなたの削減関数はそれほど意味がありません。しかし、それを無視すると答えは「正解」で、9年生の平均評点は4で、8年生の平均評点は2.4点です。グレードとカテゴリの両方によってグループ化するには

、あなたはそれで両方の値を持つディメンション・キーを指定することができます。

 exptDimension = ndx.dimension(function(d) {return d.category+'/'+d.grade;}), 

これで両方の値を持つ文字列を構築します。ここでは配列キーを作成する人もいますが、文字列への暗黙的な変換を行うため、少し邪魔です。平均格付けによって

だからそれは簡単だったが、それだけで注文:

9 English 5.00 
9 Science 3.50 
8 English 3.00 
8 Math 2.67 
8 Science 1.00 

http://jsfiddle.net/gordonwoodhull/5sbdvtqv/2/

は別の暗黙的な要件は、あなたが降順に昇順でグレード、および平均格付けで注文したいということです。 2つの反対の注文をエンコードする単一のキーを指定する必要があるため、これはやや難解です。

 .sortBy(function (d) { return (20-d.value.grade)*1000 + d.value.avg; }) 

うん:

は、ここでそれを行うための一つの方法です。ワオ。それは維持するのが楽しいだろうが、私はそれを行うより良い方法を知らない。これは、グレードが高い負の重み付けされたソートキーを作成し、平均は弱い正の重み付けで、d3.descendingと組み合わせると、あなたが望むことができます。

最終結果:

8 English 3.00 
8 Math 2.67 
8 Science 1.00 
9 English 5.00 
9 Science 3.50 

http://jsfiddle.net/gordonwoodhull/5sbdvtqv/9/