javascript - D3 : use nest function to turn flat data with parent key into a hierarchy

标签 javascript json nested operators d3.js

我确信有一种非常简单优雅的方法可以做到这一点,但我不太明白。我有一些看起来像这样的输入数据:

[
{id: 1, name: "Peter"},
{id: 2, name: "Paul", manager: 1},
{id: 3, name: "Mary", manager: 1},
{id: 4, name: "John", manager: 2},
{id: 5, name: "Jane", manager: 2}
]

如果可能,我想使用 d3.js 嵌套运算符来获取要在层次结构布局中使用的结构。像这样:

[ 
   {name: "Peter", children: [
          {name:"Paul", children: [
              {name:"John"},
              {name:"Jane"}
          ]},
          {name:"Mary"}
      ]
   }
]

最佳答案

您不能在此处使用嵌套运算符,因为嵌套会产生固定的层次结构:输出层次结构中的级别数与您指定的关键函数的数量相同。

也就是说,您可以编写自己的函数来生成一棵树。假设根节点是输入数组中的第一个节点,您可以创建一个从 id 到 node 的映射,然后惰性构造树。

function tree(nodes) {
  var nodeById = {};

  // Index the nodes by id, in case they come out of order.
  nodes.forEach(function(d) {
    nodeById[d.id] = d;
  });

  // Lazily compute children.
  nodes.forEach(function(d) {
    if ("manager" in d) {
      var manager = nodeById[d.manager];
      if (manager.children) manager.children.push(d);
      else manager.children = [d];
    }
  });

  return nodes[0];
}

如果您知道节点按顺序列出以便经理出现在他们的报告之前,您可以简化代码以仅迭代一次。

关于javascript - D3 : use nest function to turn flat data with parent key into a hierarchy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11934862/

相关文章:

java - 嵌套循环直角三角形java

javascript - 语义 UI React Transition Group 为第一个元素设置动画

python - 更新 Python 列表理解中的 JSON 元素

java - 具有树结构的分层 JSON

python如何在嵌套列表中搜索项目

ios - 无意的类嵌套 - 代码运行 10 次太频繁 (Swift)

javascript - 从spring Controller 重定向到jsp页面

javascript - 用按钮显示隐藏元素

javascript - 从引导模式获取图像 URL 到 javascript

c# - 将 json 转换为 c# 对象列表