javascript – 如何将此数据编码为JSON中的父/子结构

前端之家收集整理的这篇文章主要介绍了javascript – 如何将此数据编码为JSON中的父/子结构前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用d3.js来将可视化的动物(生物体)家族(一次最多为4000个)视为树形图,尽管数据源也可以是目录列表,也可以是命名空间对象的列表.我的数据看起来像:
  1. json = {
  2. organisms:[
  3. {name: 'Hemiptera.Miridae.Kanakamiris'},{name: 'Hemiptera.Miridae.Neophloeobia.incisa'},{name: 'Lepidoptera.Nymphalidae.Ephinephile.rawnsleyi'},... etc ...
  4. ]
  5. }

我的问题是:我正在寻找将上述数据转换为层级的父/子数据结构的最佳方式,如许多d3可视化(如treemap)所使用的(数据示例参见d3 / examples /数据/目录).
以下是所需数​​据结构的示例:

  1. {"name": "ROOT","children": [
  2. {"name": "Hemiptera","children": [
  3. {"name": "Miridae","children": [
  4. {"name": "Kanakamiris","children":[]},{"name": "Neophloeobia","children": [
  5. {"name": "incisa","children":[] }
  6. ]}
  7. ]}
  8. ]},{"name": "Lepidoptera","children": [
  9. {"name": "Nymphalidae","children": [
  10. {"name": "Ephinephile","children": [
  11. {"name": "rawnsleyi","children":[] }
  12. ]}
  13. ]}
  14. ]}
  15. ]}
  16. }

编辑:将所有原始的所需数据结构包含在ROOT节点内,以符合只有一个主父节点的d3示例的结构.

我正在寻找一个一般的设计模式,作为一个奖励,我希望看到一些解决方案在javascript,PHP,(甚至python). javascript是我的偏好.
关于PHP:我实际使用的数据来自一个PHP脚本的调用数据库,该脚本将结果编码为json.
PHP脚本中的数据库结果是一个有序数组(见下文),如果这是用于基于PHP的答案的话.

  1. Array
  2. (
  3. [0] => Array
  4. (
  5. ['Rank_Order'] => 'Hemiptera'
  6. ['Rank_Family'] => 'Miridae'
  7. ['Rank_Genus'] => 'Kanakamiris'
  8. ['Rank_Species'] => ''
  9. ) ........

哪里:
‘Rank_Order’isParentOf’Rank_Family’isParentOf’Rank_Genus’isParentOf’Rank_Species’

我问了一个类似的问题,专注于PHP解决方here,但唯一的答案是不能在我的服务器上工作,我不太明白发生了什么,所以我想从设计模式的角度提出这个问题,并包括参考对我的实际使用是在javascript和d3.js.

解决方法

以下是特定于您提供的结构,它可以相当容易地变得更通用.我确定addChild函数可以简化.希望这些意见是有帮助的.
  1. function toHeirarchy(obj) {
  2.  
  3. // Get the organisms array
  4. var orgName,orgNames = obj.organisms;
  5.  
  6. // Make root object
  7. var root = {name:'ROOT',children:[]};
  8.  
  9. // For each organism,get the name parts
  10. for (var i=0,iLen=orgNames.length; i<iLen; i++) {
  11. orgName = orgNames[i].name.split('.');
  12.  
  13. // Start from root.children
  14. children = root.children;
  15.  
  16. // For each part of name,get child if already have it
  17. // or add new object and child if not
  18. for (var j=0,jLen=orgName.length; j<jLen; j++) {
  19. children = addChild(children,orgName[j]);
  20. }
  21. }
  22. return root;
  23.  
  24. // Helper function,iterates over children looking for
  25. // name. If found,returns its child array,otherwise adds a new
  26. // child object and child array and returns it.
  27. function addChild(children,name) {
  28.  
  29. // Look for name in children
  30. for (var i=0,iLen=children.length; i<iLen; i++) {
  31.  
  32. // If find name,return its child array
  33. if (children[i].name == name) {
  34. return children[i].children;
  35. }
  36. }
  37. // If didn't find name,add a new object and
  38. // return its child array
  39. children.push({'name': name,'children':[]});
  40. return children[children.length - 1].children;
  41. }
  42. }

猜你在找的JavaScript相关文章