从平面 json 生成（多级）flare.json 数据格式

IT技术 javascript json d3.js nested
2021-02-15 07:25:23

我有一个扁平的 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。节点可以拥有的子节点数量没有限制。例如。根节点将所有剩余的节点作为其子节点。

到目前为止我尝试了什么？

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

谢谢

1个回答

这是 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);
    }
});

除非你的树很大，否则我认为这应该不会太贵，所以你应该能够在客户端做到这一点（如果你不能，你可能有太多的数据在任何情况下都无法轻松显示） .

关于基于名称的映射，我发现该forEach方法比方法更具可读性reduce。性能方面我没有看到区别。
2021-04-18 07:25:23
这里值得一提的是，对象是通过引用推送的，这就是在这里（at if (parent)... push(node)）正确处理具有深度子关联的对象的方式。代码的那部分将dataMap放在层次结构中，然后实际的树形成由... else {tree.push(node);. 为了更清楚地看到这一点，可以转到上面链接的 jsfiddle 并查看dataMap执行后（更改以 d3 开头的最后一条语句）。
2021-04-28 07:25:23
惊人的！很好的解释了！非常感谢。您知道您的解决方案的最佳部分是什么吗？一旦解决了这个问题，它就会解决我想问的下一个相关问题！:D 如果父节点不存在，那就是创建新的根节点。我希望我能以100分投票！现在开始在 D3 中渲染树。:)
2021-04-30 07:25:23
非常感谢！这就像一个魅力！我说不出我现在感到多么放松！我是 javascript 新手，你能解释一下 dataMap 函数吗？可能对像我这样的其他 JS 菜鸟有所帮助。
2021-05-15 07:25:23
其它你可能感兴趣的问题
上一篇如何阻止网站在 iframe 中加载？ 下一篇C# WebBrowser 控件——在 AJAX 之后获取文档元素？