从flat json生成(多级)flare.json数据格式

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.节点可以拥有的子节点数没有限制.例如.根节点将所有剩余的节点作为其子节点.

我到现在为止尝试过什么?

数据源是我正在通过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)

除非你的树很大,我认为这不应该太昂贵,所以你应该能够在客户端做到这一点(如果你不能,你可能有太多的数据,无论如何都很容易显示) .

  • 非常感谢!这就像一个魅力!我不知道我现在的感觉有多松了一口气!我是javascript的新手,你能解释一下dataMap的功能吗?可能对像我这样的其他JS新手很有帮助. (2认同)
  • 这里值得一提的是,对象是通过引用推送的,这就是在这里正确处理具有深度子关联的对象的方式(在`if (parent)... push(node)`)。这部分代码将 `dataMap` 置于层次结构中,然后实际的树形成由 `... else {tree.push(node);` 完成。为了更清楚地看到这一点,可以转到上面链接的jsfiddle并查看执行后的`dataMap`(更改以d3开头的最后一条语句)。 (2认同)