【问题标题】:Convert raw json to d3 compatible dataset将原始 json 转换为 d3 兼容数据集
【发布时间】:2018-03-03 05:35:33
【问题描述】:

这更像是一个算法问题。我有两张地图:depthMap 和 ChildMap。 DepthMap 是一个 javascript 地图,由:

let depthMap = new Map()

处理后,我在地图内得到以下数据:

0:[a,b,c,d]
1:[e,f]
2:[g,h,i]
3:[j]

同样,我有一个 childMap,我初始化如下:

let childMap = new Map()

经过处理,childMap有如下数据:

a:[e,f]
b:[]
c:[]
d:[]
e:[g,h]
f:[i]
g:[]
h:[j]
i:[]
j:[]

现在我想从 depthMap 和 childMap 创建一个嵌套的 JSON 对象。我需要这个用于 d3 缩进树的数据集。最终的 JSON 应该如下所示:

{
  name: 'a',
  children: [
     {
      name:e
      children: [
              {
                name: g,
                children:[]
              },
              {
                name: h,
                children: [..]
              }
           ]
     },
     {
       name: f
       children: [
          {
            name: i
            children: []
          }
       ]
     }
   ]
},
...

我不完全理解如何做到这一点。我正在考虑使用琐碎的 DFS 算法来解析图形,将 chilMap 视为邻接矩阵。

但是,我无法弄清楚如何实现 DFS 来创建这样的 JSON。

任何帮助将不胜感激。我想听听使用 ES6/Javascript 的方法。

【问题讨论】:

标签: javascript json d3.js


【解决方案1】:

我会使用一点递归:

<!DOCTYPE html>
<html>

<body>
  <script>
  
    // base data
    var data = {
      'a': ['e', 'f'],
      'b': [],
      'c': [],
      'd': [],
      'e': ['g', 'h'],
      'f': ['i'],
      'g': [],
      'h': ['j'],
      'i': [],
      'j': []
    };
    
    // recursive funtion
    function iterV(v){
      
      return v.map( (k) => {
        
        var a = map.get(k); // get array
        map.delete(k); // remove from base map
        
        return {
          'name': k,
          'children': a ? iterV(a) : [] // recursively iterate
        };
      });
    }
    
    // kick it off
    var map = new Map(Object.entries(data)), // convert to map
        first = map.entries().next().value, // get first entry in map
        nest = {
          name: first[0],
          children: iterV(first[1]) // kick off recursion
        };
        
    console.log(nest);
    
  </script>
</body>

</html>

【讨论】:

  • 在开始之前,我要感谢您的帮助和努力。这确实解决了我的问题。再次感谢马克!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-11-16
  • 1970-01-01
  • 2013-10-26
  • 2013-04-01
  • 2013-05-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多