javascript 从平面 json 生成（多级）flare.json 数据格式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17847131/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generate (multilevel) flare.json data format from flat json
提问by synaptikon
I have a flat json file structure like:
我有一个扁平的 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 }
....
....
]
And what I want is a nested file structure like:
而我想要的是一个嵌套的文件结构，如：
[
{
"name": "DEF",
"parent": "null",
"relation": "null",
"children": [
{ "name": "ABC",
"parent": "DEF",
"relation": "ghi",
"children": [
"name": "new_name",
...
"children": []
]
}
]
}
]
There is no limit on how many levels deep it should go. The current max I have is 30. There is no limit on the number of children a node can have. Eg. The root node has all the remaining as its children.
它应该深入多少层没有限制。我目前拥有的最大值是 30。节点可以拥有的子节点数量没有限制。例如。根节点将所有剩余的节点作为其子节点。
What I have tried till now?
到目前为止我尝试了什么？
Read about d3.nest() and how it is able to nest but not perfectly. https://groups.google.com/forum/?fromgroups=#!topic/d3-js/L3UeeUnNHO8/discussion
Wrote a python script for this, but it gets stuck with the null values and also since the data is not bounded (It increases everyday in double figures) so it is very very slow.
I tried the force directed layout and it worked very well but I want to add another layout that makes the visualization easy.
I could go with some other python scripts posted but they do not seem to carry forward any other information than "name" and "children".
I read this: http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/but they too have the right format data in the first place. What I intend to create is http://bl.ocks.org/mbostock/4339083.
阅读 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。
The source of the data is MS SQL Server database which I am fetching and parsing through python. Kindly help! i have been stuck at this for the past 2 weeks.
数据的来源是我通过 python 获取和解析的 MS SQL Server 数据库。请帮助！在过去的 2 周里，我一直被困在这个问题上。
Thanks
谢谢
回答by nrabinowitz
Here's one implementation, in Javascript: http://jsfiddle.net/9FqKS/
这是 Javascript 中的一种实现：http: //jsfiddle.net/9FqKS/
You start by creating a name-based map for easy lookup. There are a few different ways to do this - in this case, I use a .reducemethod, which starts with an empty object and iterates over the dataarray, adding an entry for each node:
您首先创建一个基于名称的地图以便于查找。有几种不同的方法可以做到这一点 - 在这种情况下，我使用一种.reduce方法，它从一个空对象开始并遍历data数组，为每个节点添加一个条目：
// create a {name: node} map
var dataMap = data.reduce(function(map, node) {
map[node.name] = node;
return map;
}, {});
This is equivalent to:
这相当于：
var dataMap = {};
data.forEach(function(node) {
dataMap[node.name] = node;
});
(I sometimes think the reduce is more elegant.) Then iteratively add each child to its parents, or to the root array if no parent is found:
（我有时认为 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);
}
});
Unless your tree is enormous, I don't think this should be too expensive, so you ought to be able to do it on the client side (if you can't, you might have too much data to easily display in any case).
除非你的树很大，否则我认为这不会太贵，所以你应该能够在客户端做（如果你不能，你可能有太多的数据在任何情况下都无法轻松显示） .
