js遍历解析多层级对象数组,如何给每个元素加入层级标识?

发布于 2022-09-05 22:35:01 字数 1789 浏览 27 评论 0

我有这样的一组数据:

const data = {
      'name': 'analytics',
      'children': [
       {
        'name': 'cluster',
        'children': [
         {'name': 'AgglomerativeCluster', 'size': 3938},
         {'name': 'CommunityStructure', 'size': 3812},
         {'name': 'HierarchicalCluster', 'size': 6714},
         {
           'name': 'MergeEdge', 'size': 743,
           'children': [
            {'name': 'AspectRatioBanker', 'size': 7074},
           ],
          },
        ],
       },
       {
        'name': 'graph',
        'children': [
         {'name': 'BetweennessCentrality', 'size': 3534},
         {'name': 'LinkDistance', 'size': 5731},
         {'name': 'MaxFlowMinCut', 'size': 7840},
         {'name': 'ShortestPaths', 'size': 5914},
         {'name': 'SpanningTree', 'size': 3416},
        ],
       },
       {
        'name': 'optimization',
        'children': [
         {'name': 'AspectRatioBanker', 'size': 7074},
        ],
       },
      ],
     };

需求是用d3做一个多层的关系图,要求不同层级的元素有不同的样式,这样就需要给每一层的元素加上对应的层级标识使d3渲染的时候能知道当前元素在第几层展示对应的样式。

所以我想实现把上面的那组数据的每一个元素加上一个layer标识,比如下面的样子:

const data = {
      'name': 'analytics',
      'layer': 0,
      'children': [
       {
        'name': 'cluster',
        'layer': 1,
        'children': [
         {'name': 'AgglomerativeCluster', 'size': 3938, 'layer': 2},
         {'name': 'CommunityStructure', 'size': 3812, 'layer': 2},
         {'name': 'HierarchicalCluster', 'size': 6714, 'layer': 2},
         {
           'name': 'MergeEdge', 'size': 743,
           'layer': 2,
           'children': [
            {'name': 'AspectRatioBanker', 'size': 7074, 'layer': 3},
           ],
          },
        ],
       },
       。。。。

由于数据都是动态的,所以需要代码遍历实现。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

痴者 2022-09-12 22:35:01

供参考

let queue = [data, null]
let level = 0

while (queue.length > 1) {
  let node = queue.pop()
  if (node === null) {
    level += 1
    queue.push(null)
    continue
  }
  node.layer = level
  if (node.children) {
    queue = queue.concat(data.children)
  }
}
撩动你心 2022-09-12 22:35:01
function addLevel(data, level) {
  if (!data) {
    return;
  }
  data.layer = level;

  data.children && data.children.forEach(element => {
    addLevel(element, level + 1);
  });

  return data;
}

addLevel(data, 0);
请输入代码
萌︼了一个春 2022-09-12 22:35:01
    let layer = 0
    function setLayer(obj) {
        obj.layer = layer ++
        if('children' in obj) setLayer(obj['children'])
    }
無處可尋 2022-09-12 22:35:01

最后如何实现的?可以说一下么?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文