syn*_*kon 22 javascript json nested d3.js
我有一个扁平的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 }
....
....
]
Run Code Online (Sandbox Code Playgroud)
我想要的是一个嵌套的文件结构,如:
[
{
"name": "DEF",
"parent": "null",
"relation": "null",
"children": [
{ "name": "ABC",
"parent": "DEF",
"relation": "ghi",
"children": [
"name": "new_name",
...
"children": []
]
}
]
}
]
Run Code Online (Sandbox Code Playgroud)
它的深度应该没有限制.我当前的最大值是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数据库.请帮忙!过去两周我一直被困在这里.
谢谢
nra*_*itz 42
这是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;
}, {});
Run Code Online (Sandbox Code Playgroud)
这相当于:
var dataMap = {};
data.forEach(function(node) {
dataMap[node.name] = node;
});
Run Code Online (Sandbox Code Playgroud)
(我有时认为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);
}
});
Run Code Online (Sandbox Code Playgroud)
除非你的树很大,我认为这不应该太昂贵,所以你应该能够在客户端做到这一点(如果你不能,你可能有太多的数据,无论如何都很容易显示) .