如何将关联式数据转换为D3.js Sunburst适配的层级格式？

首先明确说：d3.nest并不适合用来构建你需要的嵌套树形结构——它的核心作用是对数据进行分组聚合，而不是建立父子节点的嵌套关联，这也是你之前尝试后子节点独立在外的原因。

要把扁平的parent_id关联数据转换成D3 Sunburst需要的层级结构，更直接的方法是通过对象映射+遍历关联来实现，具体步骤如下：

实现步骤 #

1. 创建节点映射表：先把所有节点按id存入一个对象，这样可以O(1)时间快速找到任意节点，避免重复遍历查找父节点；
2. 关联父子节点：遍历每个节点，找到它的父节点（通过parent_id），把当前节点添加到父节点的children数组中；
3. 收集根节点：最后筛选出所有parent_id为null的节点，这些就是树形结构的顶层节点。

具体代码实现 #

const flatData = [{ "id": 1, "name": "ab", "parent_id": null, "value": 120, "tree_level": 1 }, { "id": 2, "name": "ac", "parent_id": null, "value": 110, "tree_level": 1 }, { "id": 3, "name": "abc", "parent_id": 1, "value": 30, "tree_level": 2 }, { "id": 4, "name": "abcd", "parent_id": 1, "value": 90, "tree_level": 2 }, { "id": 5, "name": "abc", "parent_id": 3, "value": 10, "tree_level": 3 }, { "id": 6, "name": "abc", "parent_id": 3, "value": 20, "tree_level": 3 }];

// 步骤1：创建节点映射，同时初始化每个节点的children数组
const nodeMap = {};
flatData.forEach(node => {
  node.children = [];
  nodeMap[node.id] = node;
});

// 步骤2：遍历节点，将子节点挂载到对应父节点的children中
flatData.forEach(node => {
  if (node.parent_id !== null) {
    const parentNode = nodeMap[node.parent_id];
    if (parentNode) { // 容错处理：避免数据中出现不存在的父节点
      parentNode.children.push(node);
    }
  }
});

// 步骤3：筛选出所有根节点（parent_id为null的节点）
const treeData = flatData.filter(node => node.parent_id === null);

console.log(treeData);

为什么你的d3.nest尝试失败？ #

你之前的代码中，用d.parent_id === null作为key，本质上是把根节点和非根节点分成了两组，但d3.nest的核心是分组统计，它不会帮你自动建立嵌套关系——不会把子节点"放进"父节点的属性里。所以最终得到的是分组后的数组，而不是层级嵌套的树形结构。

如果想使用D3原生工具函数，也可以考虑d3.stratify()，它专门用来处理这种扁平的父子关联数据，转换成层级结构：

const stratify = d3.stratify()
  .id(d => d.id)
  .parentId(d => d.parent_id);

// 生成D3标准层级对象
const root = stratify(flatData);
// 合并原始数据属性到层级对象中
root.each(node => {
  Object.assign(node, flatData.find(d => d.id === node.id));
});

console.log(root.children); // 根节点集合，可直接用于Sunburst组件

不过d3.stratify()会生成带有D3层级结构特定属性（如depth、height）的对象，如果你需要完全保留原始数据结构，第一种手动映射的方法更灵活。

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