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

Question

Trying to write dynamic orgsnization structure, but I have fiew troubles. Depend of element type (person or department) in JSON need to append different elements into SVG in d3.hieararchy. Can help me somebody with it?

Sample of JSON file.

{
        "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

Your problem stems from the structure of your JSON file. It is nested (in other words, objects contain arrays of other objects).

This is an intuitive way to present data for a tree structure, but it can be a bit of a pain to navigate.

I would first deal with the structure of your JSON, then worry about the presentation via d3.

To this end, I've written a little function (inspired by this) which will flatten your data structure and assign id numbers to each element:

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;
}

You simply call var data = flatten(myData) when you have your JSON data loaded.

You can then do useful stuff like split out the departments and the people:

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

This doesn't help you with the (possibly more difficult) job of laying out your hierarchy, but it does put your data into the kind of format used by projects which implement a hierarchy tree, like this.