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": [

                        ]
                    }]
                }
            ]
        }]
    }

I assume you've got no control over the structure of the JSON. Is that correct? — LondonRob, Jun 30 '17 at 14:51
This kind of nested data structure is not really the ideal format for working with, even though it's kind of intuitive for a tree structure. It'd be better to have a list of every node, each with an id, and a reference to the parent node. But I assume you can't change the JSON file? — LondonRob, Jun 30 '17 at 14:58

LondonRob · Accepted Answer · 2017-06-30T16:04:03.573

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.

Your answer was very helpful for me. Thanks a lot! – Dmytro Bushchuk Jul 01 '17 at 09:49 — Dmytro Bushchuk, Jul 01 '17 at 09:49
Thanks @DmytroBushchuk. How about a precious upvote? – LondonRob Jul 05 '17 at 13:33 — LondonRob, Jul 05 '17 at 13:33

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

1 Answers1