javascript - 从平面 json 生成(多级)flare.json 数据格式

Question

我有一个扁平的 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 脚本，但它们似乎没有携带除“姓名”和“ child ”之外的任何其他信息。

• 我读到这个:http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/但他们首先也有正确的格式数据。我打算创建的是http://bl.ocks.org/mbostock/4339083 .

数据的来源是我通过 python 获取和解析的 MS SQL Server 数据库。请帮忙!在过去的两周里，我一直被困在这个问题上。

谢谢

Answer 1

这里有一个实现，在 Javascript 中:http://jsfiddle.net/9FqKS/

您首先创建一个基于名称的 map 以便于查找。有几种不同的方法可以做到这一点 - 在这种情况下，我使用 .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更优雅。)然后迭代地将每个 child 添加到其 parent ，或者如果没有找到 parent ，则将其添加到根数组:

// 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);
    }
});

除非你的树很大，否则我认为这应该不会太昂贵，所以你应该能够在客户端完成它(如果你不能，你可能有太多数据无法轻松显示任何情况下)。