按日历月

Question

我在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_a，tot_b和tot_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],
}

我已经看过了，但是我找不到类似的东西。任何参考将不胜感激。

Answer 1

d3.nest是您的朋友，可以像这样总结您的数据。

首先，汇总您的数据以获得tot_a和tot_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中的演示。