如何通过节点与边数组创建d3-hierarchy层级结构

你可以通过以下步骤将API返回的扁平节点+边数据转换为d3-hierarchy需要的嵌套树形结构：

1. 构建节点映射表：把所有节点存入一个以Name为键的Map，方便快速查找节点对象。
2. 建立父子关系：遍历所有边数据，将子节点（Source）添加到父节点（Destination）的children数组中。
3. 筛选根节点：找出没有父节点的节点（即从未作为Source出现在边数据中的节点），这些就是树形结构的根。

以下是具体的JavaScript实现代码：

// 假设API返回的数据存在response变量中
const response = {
  "Nodes": [
    {"Name": "node-1","Type": "Model"},
    {"Name": "node-2","Type": "Job"},
    {"Name": "node-3","Type": "Data"},
    {"Name": "node-4","Type": "Data"}
  ],
  "Edges": [
    {"Source": "node-4","Destination": "node-2"},
    {"Source": "node-3","Destination": "node-2"},
    {"Source": "node-2","Destination": "node-1"}
  ]
};

// 步骤1：创建节点映射
const nodeMap = new Map();
response.Nodes.forEach(node => {
  nodeMap.set(node.Name, {...node}); // 复制节点对象，避免修改原数据
});

// 步骤2：构建父子关系
const childNodeNames = new Set();
response.Edges.forEach(edge => {
  const parentNode = nodeMap.get(edge.Destination);
  const childNode = nodeMap.get(edge.Source);
  
  // 初始化父节点的children数组
  if (!parentNode.children) {
    parentNode.children = [];
  }
  parentNode.children.push(childNode);
  childNodeNames.add(edge.Source);
});

// 步骤3：筛选根节点（没有父节点的节点）
const rootNodes = response.Nodes.filter(node => !childNodeNames.has(node.Name));

console.log(rootNodes);
// 输出结果就是你需要的d3-hierarchy可用结构

代码说明：

• 使用Map存储节点可以O(1)时间查找节点，比数组遍历更高效。
• 用Set记录所有子节点的名称，方便快速判断某个节点是否为根节点。
• 复制节点对象是为了避免修改原始的API响应数据，如果你不需要保留原数据，可以直接使用原节点对象。

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