每个csv列上的d3汇总

Question

我正在尝试使用d3.rollup来获取每一列的总和。data.csv看起来像这样：

DateTime, A, B, C
2020/2/27 7:16  3   0   1
2020/2/26 23:44 1   0   4
2020/2/26 21:35 1   1   0
2020/2/26 15:14 1   0   3
2020/2/25 20:35 1   1   0
2020/2/25 16:10 1   0   3

所需的输出：

2020/2/27   3   0   1
2020/2/26   3   1   7
2020/2/25   2   1   3

我想每天对我的数据进行分组。我正在尝试使用d3.nest嵌套数据，但无法在每列上映射数据。

我不想按诸如d3.sum（d.A）之类的名称来调用列。而是想将数据映射到所有列。

var nested = d3.nest()
  .key(function(c) {return parseDate(new Date(c.datetime)); })//parseDate 

按月获取日期

.rollup(function(d){return {
  values: d3.sum(d.map(function(v) {
  return +v[d];}))};})
.entries(data);

任何帮助将不胜感激。刚开始使用js和d3。

Answer 1

[我将使用Vanilla js给出答案，一旦我阅读了足够多的文档，我将尝试返回并给出d3答案。

您可以这样操作：

csv：

DateTime, A, B, C
2020/2/27 7:16,  3,   0,   1
2020/2/26 23:44, 1,   0,   4
2020/2/26 21:35, 1,   1,   0
2020/2/26 15:14, 1,   0,   3
2020/2/25 20:35, 1,   1,   0
2020/2/25 16:10, 1,   0,   3

我们可以通过多种方式将其转换为JSON / JavaScript数组，例如：

来自：https://stackoverflow.com/a/61080978/9792594：

const csv2json = (str, delimiter = ',') => {
  const titles = str.slice(0, str.indexOf('\n')).split(delimiter);
  const rows = str.slice(str.indexOf('\n') + 1).split('\n');
  return rows.map(row => {
    const values = row.split(delimiter);
    return titles.reduce((object, curr, i) => (object[curr.trim()] = values[i].trim(), object), {})
  });
};


let csv =
`DateTime, A, B, C
2020/2/27 7:16,  3,   0,   1
2020/2/26 23:44, 1,   0,   4
2020/2/26 21:35, 1,   1,   0
2020/2/26 15:14, 1,   0,   3
2020/2/25 20:35, 1,   1,   0
2020/2/25 16:10, 1,   0,   3`;

let word_array = csv2json(csv,',');
console.log(word_array)

.as-console-wrapper { max-height: 100% !important; top: 0; }

JSON / JavaScript数组：

[
  {
    "DateTime": "2020/2/27 7:16",
    "A": 3,
    "B": 0,
    "C": 1
  },
  {
    "DateTime": "2020/2/26 23:44",
    "A": 1,
    "B": 0,
    "C": 4
  },
  {
    "DateTime": "2020/2/26 21:35",
    "A": 1,
    "B": 1,
    "C": 0
  },
  {
    "DateTime": "2020/2/26 15:14",
    "A": 1,
    "B": 0,
    "C": 3
  },
  {
    "DateTime": "2020/2/25 20:35",
    "A": 1,
    "B": 1,
    "C": 0
  },
  {
    "DateTime": "2020/2/25 16:10",
    "A": 1,
    "B": 0,
    "C": 3
  }
]

回答您的问题（基于日期汇总数据：

• 使用reduce创建一个以每天为关键的对象（解析日期）
• 当键已经存在时，合并A，B，C上的值
• 使用Object.values将对象转换为数组

const myData = [{"DateTime":"2020/2/27 7:16","A":3,"B":0,"C":1},{"DateTime":"2020/2/26 23:44","A":1,"B":0,"C":4},{"DateTime":"2020/2/26 21:35","A":1,"B":1,"C":0},{"DateTime":"2020/2/26 15:14","A":1,"B":0,"C":3},{"DateTime":"2020/2/25 20:35","A":1,"B":1,"C":0},{"DateTime":"2020/2/25 16:10","A":1,"B":0,"C":3}];

const groupedData = Object.values(myData.reduce((aggObj, item) => {
  
  const dateOnly = new Date(item.DateTime).toLocaleDateString();
  
  if (aggObj.hasOwnProperty(dateOnly)){
    Object.entries(aggObj[dateOnly]).forEach(([key,val]) => {
      if (key != 'DateTime'){
        aggObj[dateOnly][key] = val + item[key];
      }
    });
  } else {
    aggObj[dateOnly] = {...item, "DateTime": dateOnly};
  }
  
  return aggObj;
  
}, {}));

console.log(groupedData);

.as-console-wrapper { max-height: 100% !important; top: 0; }