从平面 json 生成(多级)flare.json 数据格式 [英] 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",父母":空"，关系":空"，孩子们": [{名称":ABC"，"parent": "DEF","关系": "吉",孩子们": ["name": "new_name",...孩子们": []]}]}]它应该深入多少层没有限制.我目前的最大值是 30.一个节点可以拥有的子节点数量没有限制.例如.根节点将所有剩余的节点作为其子节点.
到目前为止我尝试了什么?
了解 d3.nest() 以及它如何能够嵌套但不完美.https://groups.google.com/forum/?fromgroups=#!主题/d3-js/L3UeeUnNHO8/讨论
为此编写了一个 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 数据库.请帮助！过去 2 周我一直坚持这个.
谢谢
这是一个实现，在 Javascript 中:http://jsfiddle.net/9FqKS/
您首先要创建一个基于名称的地图，以便于查找.有几种不同的方法可以做到这一点 - 在这种情况下，我使用 .reduce 方法，该方法从一个空对象开始并遍历 data 数组，添加一个每个节点的条目:
//创建一个 {name: node} 映射var dataMap = data.reduce(function(map, node) {地图[节点名称] = 节点；返回地图；}, {});这相当于:
var dataMap = {};data.forEach(函数(节点){数据映射[节点名称] = 节点；});(我有时认为 reduce 更优雅.)然后迭代地将每个孩子添加到其父母，或者如果没有找到父母，则添加到根数组:
//创建树数组无功树 = [];data.forEach(函数(节点){//找到父级var parent = dataMap[node.parent];如果(父母){//如果不存在则创建子数组(parent.children || (parent.children = []))//将节点添加到父节点的子数组.push(节点)；} 别的 {//parent 为空或缺失树推(节点)；}});除非你的树很大，否则我认为这应该不会太贵，所以你应该能够在客户端做(如果你不能，你可能有太多的数据来轻松显示任何情况).
I have a flat json file structure like:
[
{ "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.
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.
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.
Thanks
Here's one implementation, in 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 .reduce method, which starts with an empty object and iterates over the data array, adding an entry for each node:
// 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:
// 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).
这篇关于从平面 json 生成(多级)flare.json 数据格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
