简介

plugin.layout.dagre 封装了 dagre 提供的布局算法。Dagre 是一种针对有向图的布局算法，致力于给出一个可读的、分层的、复合一定美学原则的有向图布局。
有向分层图布局 plugin.layout.dagre - 图1
代码片段

安装

在 HTML 中引用文件：

  1. <script src="https://unpkg.com/@antv/g6/build/plugin.layout.dagre.js"></script>

或在 npm 中引用：

  1. import '@antv/g6/build/plugin.layout.dagre';

参数

参数 说明 类型 可选值 默认值
rankdir 布局方向 string TB, BT, LR, or RL 10
align 对其参数 number UL , UR ,DL or DR undefined
nodesep 同层节点间距 number 50
edgesep 同层边分间距 number 10
ranksep 节点分层间距 number 50
marginx 整图水平间距 number 0
marginy 整图竖直间距 number 0
acyclicer 是否去环 string undefined or greedy undefined
ranker 分层算法 string network-simplex , tight-tree or longest-path network-simplex
useEdgeControlPoint 是否使用边控制点 boolean true

部分参数的详细说明请参考：https://github.com/dagrejs/dagre/wiki#configuring-the-layout

使用

实例化布局对象：

  1. const dagre = new G6.Layouts.Dagre();

在实例化 Graph 时作为布局对象插入：

  1. const graph = new G6.Graph({
  2.   container: 'mountNode',
  3.   layout: dagre
  4. });