使用d3.nest和汇总进行数组操作

时间:2014-09-03 10:50:01

标签: d3.js

这是我要重现的数组:

[{ plts: 'Zlnd', values: { '150k': 4786, '200k': 1319, '250k': 249 }}
,{ plts: 'Hsls', values: { '150k': 1101, '200k': 412, '250k': 674 }}]

但是,我没有超出以下的地步:1)我有一个分组,它只给我一个'plts'级别的总和而不是任何细节元素和2)总和位于叶子'价值'的水平,但我需要它在'plts'级别。

使用它从mysql获取平面数据(有效,但尚未给出分组的值):

 d3.json("php/data3.php", function (error, JsonData) {
            JsonData.forEach(function (d) {
                d['150k'] = +d['150k'];
                d['200k'] = +d['200k'];
                d['250k'] = +d['250k']; 

结果:

[{"plts":"Zlnd","150k":4786,"200k":1319,"250k":249}
,{"plts":"Hsls","150k":1101,"200k":412,"250k":674}

这样就可以将平面阵列格式化为我需要的那个:

        var nested_data = d3.nest()
             .key(function (d) { return d.plts; })
             .rollup(function (v) {
                      return {
                      total: d3.sum(v, function (g) { return +g['150k'] + g['200k'] + g['250k'];})
                             };
                       })
                      .entries(JsonData)
                  });

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:7)

这不是d3.nest的用例。如果您的数据采用以下形式,那么Nest将是合适的:

[
    { "plts": "Zlnd", "bin": "150k", "amount": 4786 },
    { "plts": "Zlnd", "bin": "200k", "amount": 1319 },
    { "plts": "Zlnd", "bin": "250k", "amount": 249 },
    { "plts": "Hsls", "bin": "150k", "amount": 1101 },
    { "plts": "Hsls", "bin": "200k", "amount": 412 },
    { "plts": "Hsls", "bin": "250k", "amount": 674 }
]

然后

d3.nest()
  .key(function (d) { return d.plts; })
  .entries(JsonData)

会产生

[
  { key: "Zlnd", values: [
    { "plts": "Zlnd", "bin": "150k", "amount": 4786 },
    { "plts": "Zlnd", "bin": "200k", "amount": 1319 },
    { "plts": "Zlnd", "bin": "250k", "amount": 249 }
  ] },
  { key: "Hsls", values: [
    { "plts": "Hsls", "bin": "150k", "amount": 1101 },
    { "plts": "Hsls", "bin": "200k", "amount": 412 },
    { "plts": "Hsls", "bin": "250k", "amount": 674 }
  ] }
]

您可以使用

汇总
.rollup(function(values) {
  return d3.sum(values, function(v) { return v.amount; });
})
制造

[
  { key: "Zlnd", values: 6354 },
  { key: "Hsls", values: 2184 }
]

您也可以使用

d3.nest()
  .key(function (d) { return d.bin; })
  .entries(JsonData)

会产生

[
  { key: "150k", values: [
    { "plts": "Zlnd", "bin": "150k", "amount": 4786 },
    { "plts": "Hsls", "bin": "150k", "amount": 1101 }
  ] },
  { key: "200k", values: [
    { "plts": "Zlnd", "bin": "200k", "amount": 1319 },
    { "plts": "Hsls", "bin": "200k", "amount": 412 }
  ] },
  { key: "250k", values: [
    { "plts": "Zlnd", "bin": "250k", "amount": 249 },
    { "plts": "Hsls", "bin": "250k", "amount": 674 }
  ] }
]

通过这种方式,您可以类似地使用汇总来获取每个箱子的总和 - 跨所有管道。

希望这是有道理的。不确定这是否是你想要实现的目标,但它让你了解什么是有益的巢。如果这些都不适用,只需使用vanilla javascript从您正在加载的数据中获取所需的值,并使用d3.nest跳过。