如何在d3.flatRollup中多次使用d3.sum()实现多字段聚合？

要实现对所有数值字段的求和聚合，只需调整d3.flatRollup的聚合逻辑，让它返回包含多字段求和结果的数组即可。另外注意你的原始数据中数值是以字符串形式存储的，求和时显式转换为数字能避免潜在的字符串拼接问题。

修改后的代码 #

var test = [
  { branch_name: "madhapur", total_visits: "75", paid: "80" }, 
  { branch_name: "madhapur", total_visits: "50", paid: "55" },
  { branch_name: "manikonda", total_visits: "15", paid: "60" },
  { branch_name: "manikonda", total_visits: "35", paid: "20" },
  { branch_name: "krishna Nagar", total_visits: "95", paid: "30" },
];

// 自动获取需要聚合的数值字段（排除branch_name）
const numericFields = Object.keys(test[0]).filter(key => key !== 'branch_name');

var gfg1 = d3.flatRollup(
  test,
  (groupData) => {
    // 对每个数值字段分别求和
    return numericFields.map(field => d3.sum(groupData, item => +item[field]));
  },
  (item) => item.branch_name
).map(([branch, sums]) => [branch, ...sums]); // 将分支名与求和数组合并为一维数组

console.log(gfg1);

输出结果 #

[
  ["madhapur", 125, 135],
  ["manikonda", 50, 80],
  ["krishna Nagar", 95, 30]
]

关键说明 #

1. 动态适配字段：通过Object.keys和过滤逻辑自动识别数值字段，后续新增字段时无需手动修改代码。
2. 批量求和处理：用map遍历所有目标字段，结合d3.sum完成每个字段的累加，+item[field]确保字符串转数字后再计算。
3. 结果格式对齐：最后用展开运算符将分支名和求和结果合并成一维数组，完全匹配你想要的输出结构。

内容的提问来源于stack exchange，提问作者Rakesh