树图布局 Layout

阅读时间约 10 分钟

简介

图布局是指图中节点的排布方式,根据图的数据结构不同,布局可以分为两类:一般图布局、树图布局。G6 为这两类图都内置了一些常用的图布局算法。使用内置的图布局可以完成布局的参数、方法、数据的切换等。G6 还提供了一般图布局的 Web-Worker 机制,在大规模图布局中使用该机制可以使布局计算不阻塞页面。

除了内置布局方法外,一般图布局还支持 自定义布局 机制。

事实上,G6 的布局是自由的,内置布局算法仅仅是操作了数据中节点的 xy 值。因此,除了使用内置布局以及自定义的一般图布局外,用户还可以使用外部图布局算法,计算节点位置后赋值到数据中节点的 xy 字段上,G6 便可以根据该位置信息进行绘制。

由于树图特殊性,G6 扩展出了  TreeGraph ,详细文档请见:TreeGraph API。树布局是一种能很好展示有一定层次结构数据的布局方式。推荐使用 G6.TreeGraph 实现。本文将逐一介绍内置的树图布局算法,及其使用方式。

树图 TreeGraph 布局方法总览

配置树图布局

与一般图 Graph 配置方法相似,通过实例化图时配置 layout 属性设置树的布局,还可以通过 modes 属性为树配置 展开/收缩行为。以下代码声明了一个实例,定义了布局为从左到右结构的基础树图,并且定义了展开收缩行为。

const graph = new G6.TreeGraph({
  container: 'mountNode',
  modes: {
    default: [
      {
        // 定义展开/收缩行为
        type: 'collapse-expand',
      },
      'drag-canvas',
    ],
  },
  // 定义布局
  layout: {
    type: 'dendrogram', // 布局类型
    direction: 'LR', // 自左至右布局,可选的有 H / V / LR / RL / TB / BT
    nodeSep: 50, // 节点之间间距
    rankSep: 100, // 每个层级之间的间距
  },
});

树图布局方法

compactBox

描述:紧凑树布局。从根节点开始,同一深度的节点在同一层,并且布局时会将节点大小考虑进去。
img
APICompactBox API
参数

参数名类型示例/可选值默认值说明
directionString'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V''LR'layout 的方向。
- TB —— 根节点在上,往下布局
- BT —— 根节点在下,往上布局
img     img
(左)TB。(右)BT。
- LR —— 根节点在左,往右布局
- RL —— 根节点在右,往左布局
img             img
(左)LR。(右)RL。
- H —— 根节点在中间,水平对称布局
- V —— 根节点在中间,垂直对称布局
img          img
> (左)H。(右)V。
getIdFunction(d) => {
  // d 是一个节点
  return d.id + 'node';
}
undefined节点 id 的回调函数
getHeightFunction(d) => {
  // d 是一个节点
  return 10;
}
undefined节点高度的回调函数
getWidthFunction(d) => {
  // d 是一个节点
  return 20;
}
undefined节点宽度的回调函数
getVGapFunction(d) => {
  // d 是一个节点
  return 100;
}
undefined节点纵向间距的回调函数
getHGapFunction(d) => {
// d 是一个节点
  return 50;
}
undefined节点横向间距的回调函数
radialBooleantruefalse是否按照辐射状布局。若 radialtrue,建议 direction 设置为 'LR''RL'img

dendrogram

描述:生态树布局。不管数据的深度多少,总是叶节点对齐。不考虑节点大小,布局时将节点视为 1 个像素点。
img
APIDendrogram API
参数

参数名类型示例/可选值默认值说明
directionString'TB' / 'BT' / 'LR' / 'RL' / 'H' / 'V''LR'layout 的方向。
- TB —— 根节点在上,往下布局
- BT —— 根节点在下,往上布局
imgimg
> (左)TB。(右)BT。
- LR —— 根节点在左,往右布局
- RL —— 根节点在右,往左布局
imgimg
> (左)LR。(右)RL。
- H —— 根节点在中间,水平对称布局
- V —— 根节点在中间,垂直对称布局
imgimg
> (左)H。(右)V。
nodeSepNumber500节点间距
rankSepNumber1000层与层之间的间距
radialBooleantruefalse是否按照辐射状布局。若 radialtrue,建议 direction 设置为 'LR''RL'
img

indented

描述:缩进树布局。每个元素会占一行/一列。
img

APIIndented API
参数

参数名类型示例/可选值默认值说明
directionString'LR' / 'RL' / 'H''LR'layout 的方向。
'LR' —— 根节点在左,往右布局(下图左)
'RL' —— 根节点在右,往左布局(下图中)
'H' —— 根节点在中间,水平对称布局(下图右)
indented1indented2indented3
indentNumber8020列间间距
getHeightFunction(d) => {
  // d 是一个节点
  return 10;
}
undefined节点高度的回调函数
getWidthFunction(d) => {
  // d 是一个节点
  return 20;
}
undefined节点宽度的回调函数
getSideFunction(d) => {
  // d 是一个节点
  return 'left';
}
undefined节点放置在根节点左侧或右侧的回调函数,仅对与根节点直接相连的节点有效,设置后将会影响被设置节点的所有子孙节点

mindmap

描述:脑图布局。深度相同的节点将会被放置在同一层,与 compactBox 不同的是,布局不会考虑节点的大小。
img
APIMindmap API
参数

参数名类型示例/可选值默认值说明
directionString'H' / 'V''H'layout 的方向。
- H:horizontal(水平)—— 根节点的子节点分成两部分横向放置在根节点左右两侧
img
- V:vertical (竖直)—— 将根节点的所有孩子纵向排列
img
getHeightFunction(d) => {
  // d 是一个节点
  return 10;
}
undefined节点高度的回调函数
getWidthFunction(d) => {
  // d 是一个节点
  return 20;
}
undefined节点宽度的回调函数
getVGapFunction(d) => {
  // d 是一个节点
  return 100;
}
18节点纵向间距的回调函数
getHGapFunction(d) => {
  // d 是一个节点
  return 50;
}
18节点横向间距的回调函数
getSideStringFunction(d) => {
  // d 是一个节点
  return 'left';
} / 'right'
节点排布在根节点的左侧/右侧。若设置了该值,则所有节点会在根节点同一侧,即 direction = 'H' 不再起效。若该参数为回调函数,则可以指定每一个节点在根节点的左/右侧