如何用D3.js实现两个相似分层数据集的逐元素对比？

我是D3.js新手，正在学习相关技术。我需要对比两个树形结构的数据集，生成和参考数据集结构完全一致的结果，为每个节点添加以下字段：

• orphan：布尔值，表示该节点是否在对比数据集中不存在
• size_diff：仅当节点存在时添加，值为参考节点size减去对比节点size的差值（参考size - 对比size）

参考数据集 #

const data_ref = { "name": "root", "size": 25, "children": [
    { "name": "child 1", "size": 8, "children": [
        { "name": "grand child 1", "size": 4, "children": [] },
        { "name": "grand child 2", "size": 2, "children": [
            { "name": "great grand child 1", "size": 1, "children": [] },
        ]},
    ]},
    { "name": "child 2", "size": 7, "children": [
        { "name": "grand child 3", "size": 2, "children": [] },
        { "name": "grand child 4", "size": 3, "children": [] },
    ]},
]}     

对比数据集 #

const data_other = { "name": "root", "size": 24, "children": [
    { "name": "child 1", "size": 7, "children": [
        { "name": "grand child 1", "size": 4, "children": [] },
    ]},
    { "name": "child 2", "size": 9, "children": [
        { "name": "grand child 5", "size": 1, "children": [] },
        { "name": "grand child 4", "size": 3, "children": [
            { "name": "great grand child 1", "size": 1, "children": [] },
        ]},
    ]},
]}

预期结果 #

const data_diff = { "name": "root", "size": 25, "orphan": false, "size_diff": -1, "children": [
    { "name": "child 1", "size": 8, "orphan": false, "size_diff": -1, "children": [
        { "name": "grand child 1", "size": 4, "orphan": false, "size_diff": 0, "children": [] },
        { "name": "grand child 2", "size": 2, "orphan": true, "children": [
            { "name": "great grand child 1", "size": 1, "orphan": true, "children": [] },
        ]},
    ]},
    { "name": "child 2", "size": 7, "children": [
        { "name": "grand child 3", "size": 2, "orphan": true, "children": [] },
        { "name": "grand child 4", "size": 3, "orphan": false, "size_diff": 0, "children": [] },
    ]},
]} 

之前用Python实现了这个功能，现在想直接用D3.js完成，需要简洁优雅的解决方案。

解决方案 #

可以通过递归函数遍历参考树形结构，同时在对比数据集中匹配对应节点，完成字段的添加。核心思路是：

1. 对每个参考节点，在对比树的当前层级按name查找匹配项
2. 根据是否找到匹配项，设置orphan字段
3. 若找到匹配项，计算size_diff（参考size - 对比size）
4. 递归处理子节点

以下是完整的D3.js实现代码：

function compareTrees(refNode, otherTree) {
    // 在目标树的当前层级查找同名节点
    const findMatchingNode = (node, targetName) => {
        if (node.name === targetName) return node;
        return node.children?.find(child => child.name === targetName) || null;
    };

    const matchingNode = findMatchingNode(otherTree, refNode.name);
    // 复制参考节点，避免修改原数据
    const resultNode = {...refNode};

    if (matchingNode) {
        resultNode.orphan = false;
        resultNode.size_diff = refNode.size - matchingNode.size;
        // 递归处理子节点，传入匹配节点作为下一层对比目标
        resultNode.children = refNode.children.map(child => 
            compareTrees(child, matchingNode)
        );
    } else {
        resultNode.orphan = true;
        // 子节点均为orphan，传入空结构递归处理
        resultNode.children = refNode.children.map(child => 
            compareTrees(child, { children: [] })
        );
    }

    return resultNode;
}

// 使用示例
const data_diff = compareTrees(data_ref, data_other);
console.log(JSON.stringify(data_diff, null, 2));

代码说明 #

• 递归遍历：适配树形嵌套结构的天然处理方式，和D3.js处理树形数据的逻辑一致
• 节点匹配：仅在同级节点中按name查找，确保输出结构完全对齐参考树（忽略对比树中多出的节点）
• 原数据保护：通过对象展开运算符复制节点，避免修改原始参考数据集
• 子节点处理：找到匹配节点时，用其children作为下一层对比目标；未找到时，传入空的子节点数组，确保所有子节点标记为orphan

这个方案简洁高效，完全贴合需求，输出结构与参考树完全一致，同时正确添加orphan和size_diff字段。

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