缩进树

缩进树布局。每个元素会占一行/一列。
intended

使用指南

缩进树适用于展示树结构数据,配合 TreeGraph 使用。如下面代码所示,可在实例化 TreeGraph 时使用该布局。

该布局有以下配置项,Function 类型的配置项可以为不同的元素配置不同的值。具体描述请查看相关教程。

缩近树-文件系统缩近树-子节点两侧分布

direction

类型:String
可选值:'LR' | 'RL' | 'H'
默认值:'LR'
是否必须:false
说明:树布局的方向,默认为,其他选项说明

  • LR —— 根节点在左,往右布局(下图左)
  • RL —— 根节点在右,往左布局(下图中)
  • H —— 根节点在中间,水平对称布局(下图右)

              

(左)LR。(中)RL。(右)H。

indent

类型:Number
默认值:20
是否必须:false
说明:列间间距

getWidth

类型:Number | Function
示例

d => {
  // d 是一个节点
  if (d.id === 'testId') return 50;
  return 100;
};

是否必须:false
说明:每个节点的宽度

getHeight

类型:Number | Function
示例

d => {
  // d 是一个节点
  if (d.id === 'testId') return 50;
  return 100;
};

是否必须:false
说明:每个节点的高度

getSide

类型:Function
示例

d => {
  // d 是一个节点
  if (d.id === 'testId') return 'left';
  return 'right';
};

是否必须:false
说明:节点放置在根节点左侧或右侧的回调函数,仅对与根节点直接相连的节点有效,设置后将会影响被设置节点的所有子孙节点