基于节点键合并JSON对象并累加数值的D3.js实现方案

当然有啦！D3.js自带了一套非常实用的数据处理工具，完全可以不用写原生嵌套循环就能轻松完成你要的节点金额累加需求，而且代码更简洁、可读性更强。

核心思路 #

我们需要先把两个数据集的格式统一（因为一个用node01、一个用node02作为节点字段），然后用D3的分组聚合工具按节点名合并，自动累加对应金额，不管节点只存在于哪个数据集里都能被保留。

具体实现代码 #

// 第一步：统一两个数组的字段格式，把node01/node02都转为node
const normalizedData = [
  ...variable1.map(item => ({ node: item.node01, amount: item.amount })),
  ...variable2.map(item => ({ node: item.node02, amount: item.amount }))
];

// 第二步：用d3.rollup完成分组和金额累加
const aggregatedResult = d3.rollup(
  normalizedData,
  // 对每组数据执行累加操作
  group => d3.sum(group, item => item.amount),
  // 按node字段作为分组依据
  item => item.node
);

// 第三步：把rollup返回的Map结构转为你需要的数组格式
const finalResult = Array.from(aggregatedResult, ([node, totalAmount]) => ({
  node,
  amount: totalAmount
}));

代码解释 #

• 格式统一：通过map把两个数组的节点字段统一为node，这样后续分组逻辑可以统一处理。
• d3.rollup：这是D3专门用于分组聚合的函数，它会返回一个Map对象，键是分组的节点名，值是我们定义的聚合结果（这里是金额总和）。
• 转换为数组：用Array.from把Map结构转成你需要的对象数组格式，完美匹配需求里的输出样式。

另一种可选方案（用d3.group） #

如果你更习惯先分组再处理，也可以用d3.group来实现：

const groupedData = d3.group(normalizedData, item => item.node);
const finalResult = Array.from(groupedData, ([node, items]) => ({
  node,
  amount: d3.sum(items, item => item.amount)
}));

这两种方法都能完美覆盖你的需求：不管节点只在variable1、只在variable2还是两个都有，都会被正确分组并累加金额，完全不需要手写嵌套循环。

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