g6/packages/site/docs/apis/layout/IndentedLayoutOptions.zh.md
2023-11-09 17:50:23 +08:00

2.5 KiB
Raw Blame History

title order
Indented 缩进树 15

缩进树布局。树节点的层级通过水平方向的缩进量来表示。每个元素会占一行/一列。常用场景是文件目录结构。

img

direction

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

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

LR。RL。H。

indent

类型Number | Function
默认值20
示例

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

是否必须false
说明:类型为 Number 时,列间间距是固定值;类型为 Function 时,节点与根结点的间距是函数返回值。

getWidth

类型Number | Function
示例

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

是否必须false
说明:每个节点的宽度,direction'H' 时有效

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';
};

dropCap

类型Boolean


是否必须false


说明:每个节点的第一个自节点是否位于下一行。默认为 true

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