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

lipten
  • 42

我有这样的一组数据:

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},
           ],
          },
        ],
       },
       。。。。

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

回复
阅读 11.6k
4 个回答
✓ 已被采纳

供参考

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)
  }
}
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);
请输入代码
    let layer = 0
    function setLayer(obj) {
        obj.layer = layer ++
        if('children' in obj) setLayer(obj['children'])
    }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏