【问题标题】:Convert flat JSON file to hierarchical json data like flare.json [d3 example file]将平面 JSON 文件转换为分层 json 数据,如flare.json [d3 示例文件]
【发布时间】:2013-10-19 11:21:34
【问题描述】:

经过一场麻烦的斗争,我几乎想出了如何将平面 json 文件转换为分层文件。这个函数不是我自己写的。我从下面的帖子中复制了它。

D3 JSON DATA CONVERSION

但现在的问题是,帖子中编写的函数只有 2 级层次结构。但我正在寻找 4 级层次结构。我试图覆盖我失败的函数但是。

我正在尝试的代码。

变量数据 = [ { "dep": "First Top", "name": "First child", "model": "value1", "size": "320" }, { "dep": "First Top", "name": "First child", "model": "value2", "size": "320" }, { "dep": "First Top", "name": "First child", "model": "value3", "size": "320" }, { "dep": "First Top", "name": "First child", "model": "value4", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value1", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value2", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value3", "size": "320" }, { "dep": "First Top", "name": "SECOND CHILD", "model": "value4", "size": "320" }, {“dep”:“第二个顶部”,“名称”:“第一个孩子”,“模型”:“value1”,“大小”:“320”}, {“dep”:“第二个顶部”,“名称”:“第一个孩子”,“模型”:“value2”,“大小”:“320”}, {“dep”:“第二个顶部”,“名称”:“第一个孩子”,“模型”:“value3”,“大小”:“320”}, {“dep”:“第二个顶部”,“名称”:“第一个孩子”,“模型”:“value4”,“大小”:“320”}, {“dep”:“第二个顶部”,“名称”:“第二个孩子”,“模型”:“value1”,“大小”:“320”}, {“dep”:“第二个顶部”,“名称”:“第二个孩子”,“模型”:“value2”,“大小”:“320”}, {“dep”:“第二个顶部”,“名称”:“第二个孩子”,“模型”:“value3”,“大小”:“320”}, {“dep”:“第二个顶部”,“名称”:“第二个孩子”,“模型”:“value4”,“尺寸”:“320”}, {“dep”:“第三个顶部”,“名称”:“第一个孩子”,“模型”:“value2”,“大小”:“320”}, {“dep”:“第三个顶部”,“名称”:“第一个孩子”,“模型”:“value3”,“大小”:“320”}, {“dep”:“第三个顶部”,“名称”:“第一个孩子”,“模型”:“value4”,“大小”:“320”}, {“dep”:“第三个顶部”,“名称”:“第一个孩子”,“模型”:“value5”,“大小”:“320”}, {“dep”:“第三个顶部”,“名称”:“第二个孩子”,“模型”:“value1”,“大小”:“320”}, {“dep”:“第三个顶部”,“名称”:“第二个孩子”,“模型”:“value2”,“大小”:“320”}, {“dep”:“第三个顶部”,“名称”:“第二个孩子”,“模型”:“value3”,“大小”:“320”}, {“dep”:“第三个顶部”,“名称”:“第二个孩子”,“模型”:“value4”,“大小”:“320”} ] var newData = {"name":"root", "children":{}} data.forEach(函数(d){ if(typeof newData.children[d.dep] !== 'undefined') { newData.children[d.dep].children.push(d) } 别的 { newData.children[d.dep] = {"name": d.dep, "children": [{"name": d.name, "children": [{"name": d.model, "size": d.size}]}]} } }) newData.children = Object.keys(newData.children).map(function (key) { return newData.children[key]; }); // 显示我们有什么 d3.select('body').append('pre') .text(JSON.stringify(newData, null, ' '));

当前代码的输出

{ “名称”:“根”, “孩子们”: [ { "name": "第一顶", “孩子们”: [ { "name": "第一个孩子", “孩子们”: [ { “名称”:“值1”, “尺寸”:“320” } ] }, { "dep": "第一顶", "name": "第一个孩子", “模型”:“值2”, “尺寸”:“320” }, { "dep": "第一顶", "name": "第一个孩子", “模型”:“值3”, “尺寸”:“320” }, { "dep": "第一顶", "name": "第一个孩子", “模型”:“值4”, “尺寸”:“320” }, { "dep": "第一顶", "name": "第二个孩子", “模型”:“值1”, “尺寸”:“320” }, { "dep": "第一顶", "name": "第二个孩子", “模型”:“值2”, “尺寸”:“320” }, { "dep": "第一顶", "name": "第二个孩子", “模型”:“值3”, “尺寸”:“320” }, { "dep": "第一顶", "name": "第二个孩子", “模型”:“值4”, “尺寸”:“320” } ] }, { "name": "第二名", “孩子们”: [ { "name": "第一个孩子", “孩子们”: [ { “名称”:“值1”, “尺寸”:“320” } ] }, { "dep": "第二名", "name": "第一个孩子", “模型”:“值2”, “尺寸”:“320” }, { "dep": "第二名", "name": "第一个孩子", “模型”:“值3”, “尺寸”:“320” }, { "dep": "第二名", "name": "第一个孩子", “模型”:“值4”, “尺寸”:“320” }, { "dep": "第二名", "name": "第二个孩子", “模型”:“值1”, “尺寸”:“320” }, { "dep": "第二名", "name": "第二个孩子", “模型”:“值2”, “尺寸”:“320” }, { "dep": "第二名", "name": "第二个孩子", “模型”:“值3”, “尺寸”:“320” }, { "dep": "第二名", "name": "第二个孩子", “模型”:“值4”, “尺寸”:“320” } ] }, { "name": "第三名", “孩子们”: [ { "name": "第一个孩子", “孩子们”: [ { “名称”:“值2”, “尺寸”:“320” } ] }, { "dep": "第三顶", "name": "第一个孩子", “模型”:“值3”, “尺寸”:“320” }, { "dep": "第三顶", "name": "第一个孩子", “模型”:“值4”, “尺寸”:“320” }, { "dep": "第三顶", "name": "第一个孩子", “模型”:“值5”, “尺寸”:“320” }, { "dep": "第三顶", "name": "第二个孩子", “模型”:“值1”, “尺寸”:“320” }, { "dep": "第三顶", "name": "第二个孩子", “模型”:“值2”, “尺寸”:“320” }, { "dep": "第三顶", "name": "第二个孩子", “模型”:“值3”, “尺寸”:“320” }, { "dep": "第三顶", "name": "第二个孩子", “模型”:“值4”, “尺寸”:“320” } ] } ] }

所需的输出格式:

{ “名称”:“根”, “孩子们”: [ { "name": "第一顶", “孩子们”: [ { "name": "第一个孩子", “孩子们”: [ { “名称”:“值1”, “尺寸”:“320” }, { “名称”:“值2”, “尺寸”:“320” }, { “名称”:“值3”, “尺寸”:“320” }, { “名称”:“值4”, “尺寸”:“320” } ] }, { "name": "第二个孩子", “孩子们”: [ { “名称”:“值1”, “尺寸”:“320” }, { “名称”:“值2”, “尺寸”:“320” }, { “名称”:“值3”, “尺寸”:“320” }, { “名称”:“值4”, “尺寸”:“320” } ] }, ] }, { "name": "第二名", “孩子们”: [ { "name": "第一个孩子", “孩子们”: [ { “名称”:“值1”, “尺寸”:“320” }, { “名称”:“值2”, “尺寸”:“320” }, { “名称”:“值3”, “尺寸”:“320” }, { “名称”:“值4”, “尺寸”:“320” } ] }, { "name": "第二个孩子", “孩子们”: [ { “名称”:“值1”, “尺寸”:“320” }, { “名称”:“值2”, “尺寸”:“320” }, { “名称”:“值3”, “尺寸”:“320” }, { “名称”:“值4”, “尺寸”:“320” } ] }, ] }, { "name": "第三名", “孩子们”: [ { "name": "第一个孩子", “孩子们”: [ { “名称”:“值1”, “尺寸”:“320” }, { “名称”:“值2”, “尺寸”:“320” }, { “名称”:“值3”, “尺寸”:“320” }, { “名称”:“值4”, “尺寸”:“320” } ] }, { "name": "第二个孩子", “孩子们”: [ { “名称”:“值1”, “尺寸”:“320” }, { “名称”:“值2”, “尺寸”:“320” }, { “名称”:“值3”, “尺寸”:“320” }, { “名称”:“值4”, “尺寸”:“320” } ] }, ] } ] }

我从一个星期开始就头疼,但我一个人无法弄清楚。有人请修改函数以获取分层格式的数据,因为我已经更新了。

提前致谢!!

【问题讨论】:

    标签: javascript jquery json d3.js


    【解决方案1】:

    更新为使用递归方法

    这应该适用于n 级别,而不仅仅是 2 或 3。您只需指定哪些属性定义哪些级别。

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

    【讨论】:

    • 嗨 - 理查德。谢谢回复。但我无法获得 json 格式的名称列。我得到了 dep 列值,然后是模型值。在这两者之间,我需要添加名称,即 dep > name > value。我该怎么做。我不擅长编辑功能。我尝试更改这一行 - newData.children[d.dep].children[childIndex] = { name : d.name, children[{ name : d.model, size : d.size }]};但无法得到它。再次提前致谢。
    • 非常感谢理查德。经过几天的奋斗,在您的帮助下,我能够做到这一点。再次感谢!
    • 嗨,Richard - 请帮我解决这个问题post
    【解决方案2】:
    var data = [
        { "state": "UP", "district": "Agra", "block": "IradatNagar","school":"APS","name":"A" },
        { "state": "UP", "district": "Agra", "block": "IradatNagar","school":"IPS","name":"B" },
        { "state": "UP", "district": "Agra", "block": "IradatNagar","school":"APS","name":"C" },
        { "state": "MP", "district": "Bhopal", "block": "chota_Bhopal","school":"DPS","name":"D" },
        { "state": "UP", "district": "Mathura", "block": "Farah","school":"HPS","name":"E" },
        { "state": "UP", "district": "Kanpur", "block": "Mania","school":"BPs","name":"F" },
        { "state": "UP", "district": "Agra", "block": "Arjun Nagar","school":"GPS","name":"G" }, 
        { "state": "MP", "district": "Gwalior", "block": "Surya Nagar","school":"DPS","name":"H" }
    ];
    
    var newData = { name :"State", children : [] },
        levels = ["state","district","block","school"];
    
    data.forEach(function(d){
        var depthCursor = newData.children;
        levels.forEach(function( property, depth )
        {
            var index;
            depthCursor.forEach(function(child,i)
            {
                if ( d[property] == child.name ) 
                    index = i;
            });
    
            if ( isNaN(index) ) 
            {
                depthCursor.push({name : d[property], children : []});
                index = depthCursor.length - 1;
            }
    
            depthCursor = depthCursor[index].children;
    
            if ( depth === levels.length - 1 )
            {
                depthCursor.push({ name : d.name});
            }
        });
    });
    
    console.log(newData);
    

    【讨论】:

      猜你喜欢
      • 2022-11-19
      • 2013-05-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-12
      • 2019-05-15
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多