如何自定义D3.js hierarchy求和逻辑，多字段汇总保留原字段名

AI 小北

2026-10-19

解决方案

你可以使用D3层级结构内置的eachAfter后序遍历方法实现自定义多字段求和，遍历逻辑和内置sum方法完全一致，支持任意数量字段的累加且可以自定义字段名：

步骤1：生成层级结构

先修正你原代码中的小笔误（parentId回调中少了空格）：

var data = [{ "Id": 1, "Name": "a1", "Parent": null},
           { "Id": 2, "Name": "a2", "Parent": 1},
           { "Id": 3, "Name": "a3", "Parent": 2, "nb1": 30, "nb2": 40 },
           { "Id": 4, "Name": "a4", "Parent": 2, "nb1": 25, "nb2": 64 },
           { "Id": 5, "Name": "a5", "Parent": 1},
           { "Id": 6, "Name": "a6", "Parent": 5, "nb1": 2, "nb2": 6 },
           { "Id": 7, "Name": "a7", "Parent": 5, "nb1": 5, "nb2": 4 }];

var treeData = d3.stratify()
  .id(function (d) { return d.Id; })
  .parentId(function (d) { return d.Parent; })(data);

步骤2：实现多字段自定义求和

eachAfter会从最底层叶子节点开始向上遍历父节点，处理当前节点时所有子节点的求和已经完成，直接累加即可：

treeData.eachAfter(function(node) {
  // 初始化当前节点字段值，本身有值就用自身值，没有则初始化为0
  let sumNb1 = node.data.nb1 || 0;
  let sumNb2 = node.data.nb2 || 0;

  // 累加所有子节点的对应字段值
  if (node.children) {
    node.children.forEach(child => {
      sumNb1 += child.nb1;
      sumNb2 += child.nb2;
    })
  }

  // 将求和结果挂载到节点上，保留原字段名
  node.nb1 = sumNb1;
  node.nb2 = sumNb2;
  // 如果需要同步更新原始data对象，改为赋值给node.data.nb1、node.data.nb2即可
})