D3js 按 JSON 元素的类型将不同的元素附加到 d3.hierarchy 中的 SVG

Question

正在尝试编写动态组织结构，但我遇到了一些麻烦。取决于 JSON 中的元素类型（人员或部门）需要将不同的元素附加到 d3.hieararchy 中的 SVG 中。有人可以帮我吗？

JSON 文件的示例。

{
        "type": "department",
        "name": "it",
        "children": [{
            "type": "person",
            "name": "K",
            "position": "shef",
            "children": [{
                    "type": "department",
                    "name": "Front-end",
                    "children": [{
                        "type": "person",
                        "name": "Ja",
                        "position": "Team Lead",
                        "children": [{
                                "type": "person",
                                "name": "D",
                                "position": "Middle"
                            },
                            {
                                "type": "person",
                                "name": "A",
                                "position": "Middle"
                            },
                            {
                                "type": "person",
                                "name": "P",
                                "position": "Провідний інженер-програміст з Web-розробок"
                            }
                        ]
                    }]
                },
                {
                    "type": "department",
                    "name": "SysAdmins",
                    "children": [{
                        "type": "person",
                        "name": "V",
                        "position": "Team Lead",
                        "children": []
                    }]
                },
                {
                    "type": "department",
                    "name": "Help Desk",
                    "thumbnail": "",
                    "children": [{
                        "type": "person",
                        "name": "Yu",
                        "position": "Team Lead",
                        "children": [

                        ]
                    }]
                }
            ]
        }]
    }

Answer 1

您的问题源于 JSON 文件的结构。它是嵌套的（换句话说，对象包含其他对象的数组）。

这是一种呈现树结构数据的直观方式，但导航起来可能有点麻烦。

我会先处理你的结构 JSON，然后再考虑通过 d3 进行的演示。

为此，我编写了一个小函数（受 this 启发），它将扁平化您的数据结构并为每个元素分配 ID 号：

function flatten(obj, stack, parentId) {
    stack = stack || { objects: [], max: 0 }
    parentId = parentId || 0
    for (var property in obj) {
         if (obj.hasOwnProperty(property)) {
             if (typeof obj[property] == "object") {
                var newObj = obj[property];
                if (!Array.isArray(newObj)) {
                    // newObj is not an array
                    newObj.id = ++(stack.max);
                    newObj.parent = parentId
                    stack.objects.push(newObj);
                    flatten(newObj, stack, newObj.id);
                } else {
                    // newObj is an array
                    delete obj[property];
                    flatten(newObj, stack, parentId);
                }
             }
         }
    }
    return stack.objects;
}

加载 JSON 数据后，只需调用 var data = flatten(myData)。

然后你可以做一些有用的事情，比如拆分部门和人员：

var depts = data.filter(function(d) { return d.type == "department"; });

这不会帮助您完成（可能更难）布置层次结构的工作，但它确实将您的数据放入项目使用的格式中实现层次结构树，例如 this.

D3js 按 JSON 元素的类型将不同的元素附加到 d3.hierarchy 中的 SVG

D3js append different ellements into SVG in d3.hierarchy by type of JSON element

svg

json

structure

hierarchy

d3.js