javascript - d3.nest() 对象数组数据的总和

标签 javascript d3.js

我有

格式的数据
data={
  "Month": "Jan",
  "typeA": [
     {
        "A": 24000,
        "B": 24000,
        "C": 24000
     }],
  "typeB": [
     {
        "A": 20000,
        "B": 14000,
        "C": 10000
     }],
  "typeC": [
     {
        "A": 34000,
        "B": 44000,
        "C": 54000
     }]
     },
      {
  "Month": "Feb",
  "typeA": [
     {
        "A": 84000,
        "B": 64000,
        "C": 14000
     }],
  "typeB": [
     {
        "A": 20000,
        "B": 34000,
        "C": 10000
     }],
  "typeC": [
     {
        "A": 30000,
        "B": 40000,
        "C": 50000
     }]
    }
    ]

我想计算各个月份的每种类型(即typeA,TypeB)的总和, 即我想要以下格式的数据,

Month: jan
typeA:72000
typeB:44000
typeC:13200

Month:feb
typeA:162000
typeB:64000
typeC:120000

我正在使用 d3.nest() 来实现这一点,

这是我的代码,

    var months= d3.nest()
    .key(function (d) { return (d.Month) })
    .key(function (d) { return (d.typeA) })
    .key(function (d) { return (d.typeB) })
    .key(function (d) { return (d.typeC) })
      .rollup(function (leaves) {
          return d3.sum(leaves, function (d) { return d3.sum(sum,d3.values(d.A,d.B,d.C,d.D)) });
      })
      .entries(data);

我无法在这里获得元素的总和。我的总和为零。谁能告诉我哪里做错了?

最佳答案

不幸的是,我的另一个答案是针对不同的问题,但我会保留它以防它有用。

@Gabriel 的回答非常酷,但使用的是 d3 函数,但它不是通用的,而且类别是硬编码的,这并不理想。

这是一种在(大部分)完全通用的普通 JS 中执行此操作的方法。唯一的假设是每个数组元素的第一个成员是要分组的标题,其他成员是要汇总的标题。反正和通用一样,这条路还是挺短的。

我还包括了@Gabriel 答案的一个版本,以表明它也很容易概括。

  var data = [{
        "Month": "Jan",
        "typeA": [
          {
            "A": 24000,
            "B": 24000,
            "C": 24000
          }],
        "typeB": [
          {
            "A": 20000,
            "B": 14000,
            "C": 10000
          }],
        "typeC": [
          {
            "A": 34000,
            "B": 44000,
            "C": 54000
          }]
      },
      {
        "Month": "Feb",
        "typeA": [
          {
            "A": 84000,
            "B": 64000,
            "C": 14000
          }],
        "typeB": [
          {
            "A": 20000,
            "B": 34000,
            "C": 10000
          }],
        "typeC": [
          {
            "A": 30000,
            "B": 40000,
            "C": 50000
          }]
      }],
//////////////////////////////////////////////////////////////////////////////////
//Method one: without rollup
// assume that the first member of each object in the array is a heading
//  e.g. Month
//////////////////////////////////////////////////////////////////////////////////
  headings = data.reduce(function(headings, d) {
      var h = d3.keys(d)[0];  //get the heading
      return (headings [d[h]] = d3.keys(d).filter(function(p, i){return i}) //filter out the heading
        .reduce(function(s, p){   //sum each of the other members
          //p is the category being summed
          return (s[p] = d3.sum(d3.values(d[p][0])), s);
        }, {}), headings);
    }, {});

  d3.select("#output").text(JSON.stringify(headings));
//////////////////////////////////////////////////////////////////////////////////
//Method two: @Gabriel solution generalised
//////////////////////////////////////////////////////////////////////////////////
  var months = d3.nest()
    .key(function(d) { return (d.Month) })
    .rollup(function (v) {
      return d3.keys(v[0]).filter(function(p, i){return i}) //filter out the heading
        .reduce(function(s, p){   //sum each of the other members
          //p is the category being summed
          return (s[p] = d3.sum(d3.values(v[0][p][0])), s);
        }, {});
    })
    .map(data);

  d3.select("#output2").text(JSON.stringify(months));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="output"></div></br>
<div id="output2"></div>

关于javascript - d3.nest() 对象数组数据的总和,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31132813/

相关文章:

javascript - Google 日历事件创建发送通知

javascript - D3 Sunburst 图上的同心颜色

javascript - 本地 D3 无法在线工作

javascript - d3 中的放大镜

javascript - 实现不显眼的 Javascript

javascript - 由于关闭,setTimeout 不打印连续数字

javascript - JS 函数声明不应放在 block 中

javascript - 使用 javascript 或 jquery 垂直扩展弹出窗口

javascript - 显示 y 轴最底部的刻度

javascript - 在 d3.js 中有 child 朝向多边的树(类似于家谱)