Question

尝试编写动态orgsnization结构，但我有麻烦。在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中

1 个答案: