使用gojs画出拓扑图,清晰的看出组织人员关系

拓扑图的实现gojs
通过 递归数据,找到父级的id，进行展示数据
记得使用gojs把水印去掉
这个组件架构图可以看清楚公司的组织部门架构

后端返回的数据格式进行处理如下
<script>
        let treeData = [
            {
                //展示的名字
                id: 'team1',
                //专属的值
                value: '1',
                //树的子集
                children: [
                    {
                        id: 'team1-1',
                        value: '1-1',
                        children: [
                            {
                                id: 'team1-1-2',
                                value: '1-1-2'
                            }
                        ]
                    }, {
                        id: 'team1-2',
                        value: '1-2',
                        children: []
                    }
                ]
            },
            {
                id: 'team2',
                value: '2',
                children: [
                    {
                        id: 'team2-1',
                        value: '2-1',
                        children: [
                            {
                                id: 'team2-2',
                                value: '2-2'
                            }
                        ]
                    }
                ]
            }
        ];

        function recursionMenus(tree) {
            const menus = []
            tree.forEach((item) => {
                let childMenus = []
                if (item.children && item.children.length) {
                    item.children.forEach(row => {
                        row.parentId = item.id;
                    })
                    childMenus = this.recursionMenus(item.children)
                }
                menus.push({
                    ...item,
                    children: childMenus
                })
            })
            return menus
        }

        const newTree = recursionMenus(treeData)
        console.log(newTree, 99);
        let newList = []
        // 数组的怕平
        function flatArr(newTree) {
            (newTree || []).forEach((item) => {
                let cItem = JSON.parse(JSON.stringify(item || {}))
                delete cItem.children
                newList.push(cItem)
                if(item?.children && item?.children.length){
                    flatArr(item?.children)
                }
            })
            return newList
        }
        console.log( flatArr(newTree), ' flatArr(newTree) flatArr(newTree)')
    </script>

根据id 返回所有的父级id
const findAllFather = (tree, id, parentIds = []) =`在这里插入代码片`> {
  if (!tree || !tree.length) {
    return null
  }
  for (const node of tree) {
    if (node.id === id) {
      return parentIds
    }
    const find = findAllFather(node.children, id, [...parentIds, node.id])
    if (find) {
      return find
    }
  }
  return null
}