导览及使用

阅读时间约 1 分钟

树图布局总览

Graph 的布局 类似,F6 为树图 TreeGraph 提供了一些内置布局算法。可以在实例化图时配置。与 Graph 的布局 不同的是:

  • 实例化树图时必须通过配置 layout 配置布局,而 Graph 不配置 layout 时将会使用数据中的位置信息或随机布局;
  • 树图布局不支持独立使用;
  • 树图布局不支持自定义。

注意,Graph 布局与 TreeGaph 布局相互不通用。

F6 的内置树图布局有:

使用方法

const graph = new F6.TreeGraph({
  // ...                      // 其他配置项
  layout: {                // Object,对于 TreeGraph 为必须字段
    type: 'dendrogram',
    ...                    // 布局的其他配置
  }
});

每种布局方法的配置项不尽相同,具体参见本目录下每种布局的 API。

通用配置项

名称类型默认值描述
typeStringdendrogram布局类型,支持 dendrogram、compactBox、mindmap 和 indeted。
directionStringLR布局方向,有  LR , RL , TB , BT , H , V  可选。
L:左;R:右;T:上;B:下;H:垂直;V:水平。
getChildrenFunction返回当前节点的所有子节点
⚠️ 注意:type='indeted' 时,direction 只能取 'LR''RL''H' 这三个值。