TreeGraph

TreeGraph是G6专门为树图场景打造的图。TreeGraph继承自Graph。G6.TreeGraphG6.Graph最大的区别就是数据结构和内置布局计算。主要出于以下考虑:

  • 数据结构:树图的数据一般是嵌套结构,边的数据隐含在嵌套结构中,并不会特意指定edge。此布局要求数据中一个节点需要有idchildren两个数据项,最精简的数据结构如下所示:
  1. const data = {
  2. id: 'root',
  3. children: [
  4. {
  5. id: 'subTree1',
  6. children: [...]
  7. },
  8. {
  9. id: 'subTree2',
  10. children: [...]
  11. }
  12. ]
  13. };
  • 布局特殊性:

    • 树图的布局算法一般是不改变源数据的,而是重新生成一份数据,将源数据作为新数据的一个属性。如果每次都需要做次遍历转换数据到节点和边的数据增加了用户的实现复杂度。
    • 树图的每次新增/删除/展开/收缩节点,都需要重新计算布局。遍历一份结构化数据对应到图上每个节点去做更新操作,也很麻烦。