D3关于如何求和

d3 on how to sum values

本文关键字：求和 于如何 D3      更新时间：2023-09-26

我有以下数据:

[
  { id: 0, Department: "Civil", Value: "40000", Title:"Sustainability", ComID: "45", organisation: { City: "New York", ComID: 45, Country: "USA" } },
  { id: 1, Department: "Energy", Value: "82000", Title: "Wind Energy", ComID: "62", organisation: { City: "Paris" , ComID: 62, Country: "France" } },
  { id: 2, Department: "Medical", Value: "67000", Title: "Neuroscience", ComID: "21", organisation: { City: "Berlin", ComID: 21, Country: "Germany" } },
  { id: 3, Department: "Computer", Value: "100000", Title: "Security", ComID: "67", organisation: { City: "Amsterdam", ComID: 67, Country: "Holland" } }
]

数据是一个大约有100个对象的数组，就像上面的那些。

在数据中我有同一国家的组织。我想把每个国家的Value属性相加，并把它放在一个新表中。

例如，我想创建:

[ { Name: "each Country", Value: "the summed value" } ]

编辑回复更新的问题

您可以使用d3.nest()根据给定的键(在本例中是国家)对对象进行分组，然后将它们"卷起来"以对属于给定国家的每个项目的值求和。在您的例子中，一行代码看起来像这样:

d3.nest().key(function(d){
    return d.organisation.Country; })
.rollup(function(leaves){
    return d3.sum(leaves, function(d){
        return d.Value;
    });
}).entries(data)
.map(function(d){
    return { Country: d.key, Value: d.values};
});

这里我使用d3.sum，传递一个访问器函数来指定您想要对每个项目的Value求和:

返回示例数据上的四个对象:

[{"Country":"USA","Value":40000},
 {"Country":"France","Value":82000},
 {"Country":"Germany","Value":67000},
 {"Country":"Holland","Value":100000}]

Javascript为您将字符串转换为数字。请注意，您的示例数据中有一些错字，我必须修复，给出以下内容:

var data = [ { id:0,Department: "Civil",Value : "40000",Title :"Sustainability",ComID : "45", organisation:{ City:"New York",ComID:"45",Country: "USA"}}, { id:1,Department: "Energy",Value : "82000",Title : "Wind Energy",ComID : "62", organisation:{ City:"Paris",ComID:"62",Country: "France"}}, { id:2,Department: "Medical",Value : "67000",Title : "Neuroscience",ComID : "21", organisation:{ City:"Berlin",ComID:"21",Country: "Germany"}}, { id:3,Department: "Computer",Value : "100000",Title : "Security",ComID : "67", organisation:{ City:"Amsterdam",ComID:"67",Country: "Holland"}}]

由于d3-collection已被弃用而支持d3.array，我们可以使用d3.rollups来实现以前与d3.nest一起工作的功能:

d3
  .rollups(
    data,
    xs => d3.sum(xs, x => x.Value),
    d => d.organisation.Country
  )
  .map(([k, v]) => ({ Country: k, Value: v }))

:

  • 应用d3.rollups:
    • d3.rollups接受3个参数:输入数组、约简函数和分组函数
    • d => d.organisation.Country按Country对项目进行分组
    • xs => d3.sum(xs, x => x.Value)通过提取它们的值来减少分组值值并使用d3.sum
      • 将它们相加
  • 格式化rollup的输出，以获得预期的输出(映射转换)。

var data = [
  { id: 0, Department: "Civil", Value: "40000", Title:"Sustainability", ComID: "45", organisation: { City: "New York", ComID: 45, Country: "USA" } },
  { id: 1, Department: "Energy", Value: "82000", Title: "Wind Energy", ComID: "62", organisation: { City: "Paris" , ComID: 62, Country: "France" } },
  { id: 2, Department: "Medical", Value: "67000", Title: "Neuroscience", ComID: "21", organisation: { City: "Berlin", ComID: 21, Country: "Germany" } },
  { id: 3, Department: "Computer", Value: "100000", Title: "Security", ComID: "67", organisation: { City: "Amsterdam", ComID: 67, Country: "Holland" } }
];
var output =
  d3.rollups(
      data,
      xs => d3.sum(xs, x => x.Value),
      d => d.organisation.Country
    )
    .map(([k, v]) => ({ Country: k, Value: v }))
console.log(output);
<script src="https://d3js.org/d3-array.v2.min.js"></script>

相关文章：