从平面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} 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);

}

});

除非您的树很大,否则我认为这应该不会太昂贵,因此您应该能够在客户端进行操作(如果不能这样做,那么在任何情况下都可能有太多数据无法轻松显示) 。

以上是 从平面JSON生成(多级)flare.json数据格式 的全部内容, 来源链接: utcz.com/qa/427573.html

回到顶部