将平面JSON文件转换为层次化json数据，如flare.json [d3示例文件] [英] Convert flat JSON file to hierarchical json data like flare.json [d3 example file]
本文介绍了将平面JSON文件转换为层次化json数据，如flare.json [d3示例文件]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在一个麻烦的战斗后，我几乎想到如何将一个平面的json文件转换为层次结构。我没有写自己的功能。我从下面的帖子中复制了它。
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级的层次结构。但我正在寻找4级层次结构。我试图覆盖我失败的函数，但是。
But now the problem now is, the function which was written in the post has just 2 levels of hierarchy. But i'm looking for 4 levels hierarchy. I tried to override the function where i failed but.
代码与我的尝试。 b $ b
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": "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": "Second Top", "name": "First Child", "model": "value1", "size": "320" },
{ "dep": "Second Top", "name": "First Child", "model": "value2", "size": "320" },
{ "dep": "Second Top", "name": "First Child", "model": "value3", "size": "320" },
{ "dep": "Second Top", "name": "First Child", "model": "value4", "size": "320" },
{ "dep": "Second Top", "name": "SECOND CHILD", "model": "value1", "size": "320" },
{ "dep": "Second Top", "name": "SECOND CHILD", "model": "value2", "size": "320" },
{ "dep": "Second Top", "name": "SECOND CHILD", "model": "value3", "size": "320" },
{ "dep": "Second Top", "name": "SECOND CHILD", "model": "value4", "size": "320" },
{ "dep": "Third Top", "name": "First Child", "model": "value2", "size": "320" },
{ "dep": "Third Top", "name": "First Child", "model": "value3", "size": "320" },
{ "dep": "Third Top", "name": "First Child", "model": "value4", "size": "320" },
{ "dep": "Third Top", "name": "First Child", "model": "value5", "size": "320" },
{ "dep": "Third Top", "name": "Second Child", "model": "value1", "size": "320" },
{ "dep": "Third Top", "name": "Second Child", "model": "value2", "size": "320" },
{ "dep": "Third Top", "name": "Second Child", "model": "value3", "size": "320" },
{ "dep": "Third Top", "name": "Second Child", "model": "value4", "size": "320" }
]
var newData = {"name":"root", "children":{}}
data.forEach(function(d){
if(typeof newData.children[d.dep] !== 'undefined') {
newData.children[d.dep].children.push(d)
} else {
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]; });
// show what we've got
d3.select('body').append('pre')
.text(JSON.stringify(newData, null, ' '));
当前代码的输出
{
"name": "root",
"children": [
{
"name": "First Top",
"children": [
{
"name": "First child",
"children": [
{
"name": "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"
}
]
},
{
"name": "Second Top",
"children": [
{
"name": "First Child",
"children": [
{
"name": "value1",
"size": "320"
}
]
},
{
"dep": "Second Top",
"name": "First Child",
"model": "value2",
"size": "320"
},
{
"dep": "Second Top",
"name": "First Child",
"model": "value3",
"size": "320"
},
{
"dep": "Second Top",
"name": "First Child",
"model": "value4",
"size": "320"
},
{
"dep": "Second Top",
"name": "SECOND CHILD",
"model": "value1",
"size": "320"
},
{
"dep": "Second Top",
"name": "SECOND CHILD",
"model": "value2",
"size": "320"
},
{
"dep": "Second Top",
"name": "SECOND CHILD",
"model": "value3",
"size": "320"
},
{
"dep": "Second Top",
"name": "SECOND CHILD",
"model": "value4",
"size": "320"
}
]
},
{
"name": "Third Top",
"children": [
{
"name": "First Child",
"children": [
{
"name": "value2",
"size": "320"
}
]
},
{
"dep": "Third Top",
"name": "First Child",
"model": "value3",
"size": "320"
},
{
"dep": "Third Top",
"name": "First Child",
"model": "value4",
"size": "320"
},
{
"dep": "Third Top",
"name": "First Child",
"model": "value5",
"size": "320"
},
{
"dep": "Third Top",
"name": "Second Child",
"model": "value1",
"size": "320"
},
{
"dep": "Third Top",
"name": "Second Child",
"model": "value2",
"size": "320"
},
{
"dep": "Third Top",
"name": "Second Child",
"model": "value3",
"size": "320"
},
{
"dep": "Third Top",
"name": "Second Child",
"model": "value4",
"size": "320"
}
]
}
]
}
所需的输出格式：
{
"name": "root",
"children": [
{
"name": "First Top",
"children": [
{
"name": "First child",
"children": [
{
"name": "value1",
"size": "320"
},
{
"name": "value2",
"size": "320"
},
{
"name": "value3",
"size": "320"
},
{
"name": "value4",
"size": "320"
}
]
},
{
"name": "Second child",
"children": [
{
"name": "value1",
"size": "320"
},
{
"name": "value2",
"size": "320"
},
{
"name": "value3",
"size": "320"
},
{
"name": "value4",
"size": "320"
}
]
},
]
},
{
"name": "Second Top",
"children": [
{
"name": "First child",
"children": [
{
"name": "value1",
"size": "320"
},
{
"name": "value2",
"size": "320"
},
{
"name": "value3",
"size": "320"
},
{
"name": "value4",
"size": "320"
}
]
},
{
"name": "Second child",
"children": [
{
"name": "value1",
"size": "320"
},
{
"name": "value2",
"size": "320"
},
{
"name": "value3",
"size": "320"
},
{
"name": "value4",
"size": "320"
}
]
},
]
},
{
"name": "Third Top",
"children": [
{
"name": "First child",
"children": [
{
"name": "value1",
"size": "320"
},
{
"name": "value2",
"size": "320"
},
{
"name": "value3",
"size": "320"
},
{
"name": "value4",
"size": "320"
}
]
},
{
"name": "Second child",
"children": [
{
"name": "value1",
"size": "320"
},
{
"name": "value2",
"size": "320"
},
{
"name": "value3",
"size": "320"
},
{
"name": "value4",
"size": "320"
}
]
},
]
}
]
}
我从一个星期开始我的头，但我单独无法想出来。有人请修改函数以获取我更新的分层格式的数据。
I'm cracking my head from a week but i alone couldn't figure it out. Someone please amend the function to get the data in the hierarchical format as i've updated.
提前感谢！
推荐答案
更新为使用递归方法
c> n 级别，而不只是2或3.您只需要指定哪些属性定义哪些级别。
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 });
});
});
这篇关于将平面JSON文件转换为层次化json数据，如flare.json [d3示例文件]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
