Convert flat JSON file to hierarchical json data like flare.json [d3 example file]

后端 未结 2 1423
轻奢々
轻奢々 2020-12-02 17:35

After a troublesome fight i almost figured how to convert a flat json file to a Hierarchical one. I didn\'t write the function by my own. I copied it from the below post.

2条回答
  •  南方客
    南方客 (楼主)
    2020-12-02 18:34

    Updated to use a recursive method

    This should work for n levels rather than just 2 or 3. You just need to specify which properties define which levels.

    var data = [
        { "dep": "First Top", "name": "First child", "model": "value1", "size": "320" },
        { "dep": "First Top", "name": "First child", "model": "value2", "size": "320" },
        { "dep": "First Top", "name": "SECOND CHILD", "model": "value1", "size": "320" },
        { "dep": "Second Top", "name": "First Child", "model": "value1", "size": "320" }
    ];
    
    var newData = { name :"root", children : [] },
        levels = ["dep","name"];
    
    // For each data row, loop through the expected levels traversing the output tree
    data.forEach(function(d){
        // Keep this as a reference to the current level
        var depthCursor = newData.children;
        // Go down one level at a time
        levels.forEach(function( property, depth ){
    
            // Look to see if a branch has already been created
            var index;
            depthCursor.forEach(function(child,i){
                if ( d[property] == child.name ) index = i;
            });
            // Add a branch if it isn't there
            if ( isNaN(index) ) {
                depthCursor.push({ name : d[property], children : []});
                index = depthCursor.length - 1;
            }
            // Now reference the new child array as we go deeper into the tree
            depthCursor = depthCursor[index].children;
            // This is a leaf, so add the last element to the specified branch
            if ( depth === levels.length - 1 ) depthCursor.push({ name : d.model, size : d.size });
        });
    });
    

提交回复
热议问题