如何用GoJS创建单棵树结构？现有数据显示双树问题求助

DevOps 小满

2026-8-6

解决方案

要只展示以名称为"101"的节点为根的树结构，核心是过滤出该根节点及其所有层级的后代节点，具体实现步骤如下：

1. 定位目标根节点

先从原数组中找到name: "101"的节点，它的key值为45，是整棵树的起点。

2. 递归收集所有后代节点

通过递归遍历，找出所有父节点链最终指向目标根节点的节点，将它们和根节点组合成新的数组。

完整代码实现

// 原节点数据数组
var nodeDataArray = [
    {key: 45, name:"101",email:"101",pic: ""},
    {key: 49, parent: 46,name:"102-1",email:"102-1",pic: ""},
    {key: 47, parent: 46,name:"102-2",email:"102-2",pic: ""},
    {key: 46, parent: 43,name:"102",email:"102",pic: ""},
    {key: 48, parent: 46,name:"102-3",email:"102-3",pic: ""},
    {key: 54, parent: 45,name:"101-1",email:"101-1",pic: ""},
    {key: 53, parent: 45,name:"101-2",email:"101-2",pic: ""},
    {key: 52, parent: 45,name:"101-3",email:"101-3",pic: ""},
];

// 找到目标根节点
const rootNode = nodeDataArray.find(node => node.name === "101");
if (!rootNode) {
    console.log("未找到名称为101的根节点");
}

// 递归收集根节点及其所有后代
function gatherTreeNodes(rootKey, allNodes) {
    // 获取当前节点的直接子节点
    const directChildren = allNodes.filter(node => node.parent === rootKey);
    // 递归收集子节点的后代，再合并根节点本身
    return [rootNode, ...directChildren.flatMap(child => gatherTreeNodes(child.key, allNodes))];
}

// 得到仅包含101为根的树节点数组
const targetTreeNodes = gatherTreeNodes(rootNode.key, nodeDataArray);
console.log(targetTreeNodes);