如何将JSON结构表示为HTML中的组织树？

Question

我有一个嵌套的json对象，它表示父节点与其子节点之间的一对多关系。我想将此json表示为HTML中的组织结构图。我发现我可以使用Google Charts来做到这一点，但是我不确定Google Charts是否允许您设计盒子或对设计进行任何修改。

有人知道我可以学习的任何资源吗？

这是我构造的json对象：

{ 'id': 1,
  'name': 'Parent Node',
  'description': 'First Parent Node',
  'children': [
  {
      'id': 2,
      'name': 'child1',
      'description': 'child1',
      'children': [
      {
          'id': 4,
          'name': 'grand1',
          'description': 'grand1',
          'children': []
       }]
   },
   {
       'id': 3,
       'name': 'child2',
       'description': 'child2',
       'children': []
   }]
 }

这个问题Representing Binary Tree Structure in Web browser也很相似，但是链接似乎无效。

Answer 1

以下是您提到的另一个问题的链接的有效版本：http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html

Answer 2

我不确定您希望显示器的显示效果如何，所以有两个可行的答案：

• 您只需要层次结构： 只需递归遍历JSON并创建 ul 和 li 标签，然后添加CSS进行改进（您可能会在Codepen.io上找到满足您需求的内容）或使用您找到的其他帖子（http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html和http://experiments.wemakesites.net/css3-treeview.html）的链接

• 您希望它可以平滑显示，并且不介意使用外部库： 使用类似https://www.graphdracula.net/或此处https://dzone.com/articles/top-5-javascript-libraries-to-create-an-org-chart所列内容之一。您需要转换数据以匹配库所需的方式，但这通常是值得的。