Dagre

Dagre 是一种层次布局。

属性

rankdir

类型： String可选值：'TB' | 'BT' | 'LR' | 'RL'默认值：'TB'是否必须：false说明：布局的方向。T：top（上）；B：bottom（下）；L：left（左）；R：right（右）。

• 'TB'：从上至下布局；
• 'BT'：从下至上布局；
• 'LR'：从左至右布局；
• 'RL'：从右至左布局。

align

类型： String可选值：'UL' | 'UR' | 'DL' | 'DR'默认值：'UL'是否必须：false说明：节点对齐方式。U：upper（上）；D：down（下）；L：left（左）；R：right（右）

• 'UL'：对齐到左上角；
• 'UR'：对齐到右上角；
• 'DL'：对齐到左下角；
• 'DR'：对齐到右下角。

nodesep

类型： Number默认值：50是否必须：false说明：节点间距（px）。在rankdir 为 'TB' 或 'BT' 时是节点的水平间距；在rankdir 为 'LR' 或 'RL' 时代表节点的竖直方向间距

ranksep

类型： Function默认值：undefined是否必须：false说明：层间距（px）。在rankdir 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在rankdir 为 'LR' 或 'RL' 时代表水平方向相邻层间距

nodesepFunc

类型： Function默认值：undefined示例：

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

是否必须：false说明：节点水平间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。在rankdir 为 'TB' 或 'BT' 时是节点的水平间距；在rankdir 为 'LR' 或 'RL' 时代表节点的竖直方向间距。优先级低于 nodesep，即若设置了 nodesep，则 nodesepFunc 不生效

ranksepFunc

类型： Number默认值：50示例：

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

是否必须：false说明：层间距（px）的回调函数，通过该参数可以对不同节点设置不同的层间距。在rankdir 为 'TB' 或 'BT' 时是竖直方向相邻层间距；在rankdir 为 'LR' 或 'RL' 时代表水平方向相邻层间距。优先级低于 ranksep，即若设置了 ranksep，则 ranksepFunc 不生效

controlPoints

类型： Boolean默认值：true是否必须：false说明：是否保留布局连线的控制点

方法

与父类 Layout 的方法相同。使用该布局时不需要关心内部方法的调用，由 G6 控制。

使用方法

实例化图时配置到 layout 中，如果没有配置 layout 默认使用 Random 布局。

const graph = new G6.Graph({
  container: 'mountNode',
  width: 1000,
  height: 600,
  layout: {
    type: 'dagre',
    rankdir: 'LR',           // 可选，默认为图的中心
    align: 'DL',             // 可选
    nodesep: 20,             // 可选
    ranksep: 50,             // 可选
    controlPoints: true      // 可选
  }
);