从平面JSON生成(多级)flare.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脚本,但是它们似乎除了“ name”和“ children”之外没有任何其他信息。
我读了这篇文章: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} mapvar 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 arrayvar 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);
}
});
除非您的树很大,否则我认为这应该不会太昂贵,因此您应该能够在客户端进行操作(如果不能这样做,那么在任何情况下都可能有太多数据无法轻松显示) 。
以上是 从平面JSON生成(多级)flare.json数据格式 的全部内容, 来源链接: utcz.com/qa/427573.html