[英]Generate (multilevel) flare.json data format from flat json
我有一個扁平的json文件結構,如:
[
{ "name" : "ABC", "parent":"DEF", "relation": "ghi", "depth": 1 },
{ "name" : "DEF", "parent":"null", "relation": "null", "depth": 0 },
{ "name" : "new_name", "parent":"ABC", "relation": "rel", "depth": 2 }
....
....
]
我想要的是一個嵌套的文件結構,如:
[
{
"name": "DEF",
"parent": "null",
"relation": "null",
"children": [
{ "name": "ABC",
"parent": "DEF",
"relation": "ghi",
"children": [
"name": "new_name",
...
"children": []
]
}
]
}
]
它的深度應該沒有限制。 我當前的最大值是30.節點可以擁有的子節點數沒有限制。 例如。 根節點將所有剩余的節點作為其子節點。
我到現在為止嘗試過什么?
閱讀有關d3.nest()及其如何嵌套但不完美的信息。 https://groups.google.com/forum/?fromgroups=#!topic/d3-js/L3UeeUnNHO8/discussion
為此寫了一個python腳本,但是它被空值所困,並且由於數據沒有限制(它每天以兩位數增加)所以它非常慢。
我嘗試了強制定向布局並且它工作得很好,但我想添加另一種布局,使可視化變得容易。
我可以使用其他一些python腳本發布,但它們似乎沒有提供除“名稱”和“孩子”之外的任何其他信息。
我讀到了這個: http : //blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/但他們也擁有正確的格式數據。 我打算創建的是http://bl.ocks.org/mbostock/4339083 。
數據源是我正在通過python獲取和解析的MS SQL Server數據庫。 請幫忙! 過去兩周我一直被困在這里。
謝謝
這是Javascript中的一個實現: http : //jsfiddle.net/9FqKS/
首先,創建一個基於名稱的地圖,以便於查找。 有幾種不同的方法可以做到這一點 - 在這種情況下,我使用.reduce
方法,該方法以空對象開始並遍歷data
數組,為每個節點添加一個條目:
// create a {name: node} map
var dataMap = data.reduce(function(map, node) {
map[node.name] = node;
return map;
}, {});
這相當於:
var dataMap = {};
data.forEach(function(node) {
dataMap[node.name] = node;
});
(我有時認為reduce更優雅。)然后迭代地將每個子節點添加到其父節點,或者如果沒有找到父節點則添加到根數組:
// create the tree array
var tree = [];
data.forEach(function(node) {
// find parent
var parent = dataMap[node.parent];
if (parent) {
// create child array if it doesn't exist
(parent.children || (parent.children = []))
// add node to parent's child array
.push(node);
} else {
// parent is null or missing
tree.push(node);
}
});
除非你的樹很大,我認為這不應該太昂貴,所以你應該能夠在客戶端做到這一點(如果你不能,你可能有太多的數據,無論如何都很容易顯示) 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.