2016-11-28 6 views
0

私はJavascriptで非常に新しく、D3を学ぼうとしています。私は、以下の構造を持つjsonファイル(またはcsv)持って月別にグループ化されたデータ

:中でも

[{"tot_b": "172", "tot_a": "91", "datetime": "2012-01-01"}, 
{"tot_b": "116", "tot_a": "69", "datetime": "2012-01-02"}, 
{"tot_b": "122", "tot_a": "88", "datetime": "2012-02-01"}, 
{"tot_b": "30", "tot_a": "116", "datetime": "2012-02-02"}, 
{"tot_b": "19", "tot_a": "99", "datetime": "2012-03-01"}, 
{"tot_b": "116", "tot_a": "84", "datetime": "2012-03-02"},] 

を、目的はtot_atot_btot_b/tot_aの値で棒グラフの数を示すことです。

jsonファイルを読み込み、同じ暦月の日付に対応するデータ構造を持つ方法を教えてください。たとえば、次のようにしたいとします。

{ 
    'data': ['2012-01', '2012-02', '2012-03'], 
    'tot_a': [91+69, 88+116, 99+84], 
    'tot_b': [172+116, 122+30, 19+116], 
} 

私はこれを調べましたが、これに似たものは見つかりませんでした。どんな参考文献も理解できます。

答えて

1

d3.nestは、このようなデータを要約するためのあなたの友人です。

まず、tot_atot_bの合計を得るためにあなたのデータをロールアップ:あなたは指定されたデータ構造にそれをアンラップ、その後

var nested_data = d3.nest() 
    .key(function(d) { return d.datetime.split('-').slice(0, 2).join('-'); }) 
    .sortKeys(d3.ascending) 
    .rollup(function(leaves) { 
     return { 
     tot_b: d3.sum(leaves, function(d){ return d.tot_b }), 
     tot_a: d3.sum(leaves, function(d){ return d.tot_a; }) 
     }; 
    }) 
    .entries(data); 

var keys = nested_data.map(function(d){ return d.key; }); 
var bar_chart_data = { 
    data: keys, 
    tot_a: nested_data.map(function(d){ return d.values.tot_a; }), 
    tot_b: nested_data.map(function(d){ return d.values.tot_b; }) 
}; 

そして、あなたが得る:

{ 
"data":["2012-01","2012-02","2012-03"], 
"tot_a":[160,204,183], 
"tot_b":[288,152,135] 
} 

デモはFiddleです。

関連する問題