g6/docs/api/TreeGraph.zh.md
2019-11-08 19:43:55 +08:00

12 KiB
Raw Blame History

title order
TreeGraph 2

TreeGraph是G6专门为树图场景打造的图。TreeGraph继承自Graph。G6.TreeGraphG6.Graph最大的区别就是数据结构和内置布局计算。主要出于以下考虑:

  • 数据结构树图的数据一般是嵌套结构边的数据隐含在嵌套结构中并不会特意指定edge。此布局要求数据中一个节点需要有idchildren两个数据项,最精简的数据结构如下所示:
const data = {
  id: 'root',
  children: [
    {
      id: 'subTree1',
      children: [...]
    }, 
    {
      id: 'subTree2',
      children: [...]           
    }
  ]
};
  • 布局特殊性:
    • 树图的布局算法一般是不改变源数据的,而是重新生成一份数据,将源数据作为新数据的一个属性。如果每次都需要做次遍历转换数据到节点和边的数据增加了用户的实现复杂度。
    • 树图的每次新增/删除/展开/收缩节点,都需要重新计算布局。遍历一份结构化数据对应到图上每个节点去做更新操作,也很麻烦。

初始化

G6.TreeGraph

参数

名称 类型 默认值 描述
layout object null 3.0.4 版本开始支持树布局算法配置。3.0.4 版本之前是 function 形式。建议开发者使用配置形式,操作粒度更细。
animate boolean true 默认打开重布局动画开关。

用法

const treeGraph = new G6.TreeGraph({
	container: 'mountNode',
  width: 800,
  height: 600,
  modes: {
    default: [{
      type: 'collapse-expand',
      onChange(item, collapsed) {
        const icon = item.get('group').findByClassName('collapse-icon');
        if (collapsed) {
          icon.attr('symbol', EXPAND_ICON);
        } else {
          icon.attr('symbol', COLLAPSE_ICON);
        }
      }
    }, 'drag-canvas', 'zoom-canvas']
  },
  layout: {
    type: 'dendrogram',
    direction: 'LR', // H / V / LR / RL / TB / BT
    nodeSep: 50,
    rankSep: 100,
    radial: true
  }
})

layout配置项

layout目前支持dendrogram、compactBox、mindmap和indeted四种布局方式。

通用配置项

名称 类型 默认值 描述
type string dendrogram 布局类型支持dendrogram、compactBox、mindmap和indeted。
direction string LR 布局方向,有 LR , RL , TB , BT , H , V 可选。
L: 左; R: 右; T: 上; B H: 垂直; V: 水平。
getChildren Function 返回当前节点的所有子节点

⚠️**注意:**当type=indeted时,direction只能取LR、RL和H这三个值。

dendrogram

dendrogram示意图 使用dendrogram方式布局时,direction取不同值时的效果如下所示。

LR RL H
TB BT V

dendrogram配置项

名称 类型 默认值 描述
nodeSep number 20 同层次节点之间的间距
rankSep number 200 相邻层级节点之间的间距
nodeSize number 20 节点大小
subTreeSep number 10 子树之间的间距
isHorizontal boolean true 是否是水平方向,默认为水平方向

compactBox

compactBox示意图 使用compactBox方式布局时,direction取不同值时的效果如下所示。

LR RL H
TB BT V

compactBox配置项

名称 类型 默认值 描述
getId Function 指定节点ID
getHeight Function 36 指定节点高度
getWidth Function 18 指定节点宽度
getVGap Function 18 指定节点之间的垂直间距
getHGap Function 18 指定节点之间的水平间距

⚠️**注意:**使用getWidth、getHeight、getVGap和getHGap指定节点的宽高及间距后并不会改变节点的大小具体原理如下所示

/*
   * Gaps: filling space between nodes
   * (x, y) ----------------------
   * |            vgap            |
   * |    --------------------    h
   * | h |                    |   e
   * | g |                    |   i
   * | a |                    |   g
   * | p |                    |   h
   * |   ---------------------    t
   * |                            |
   *  -----------width------------
   */

🦁以上原理同样适用于indented和mindmap布局。

indented

indented示意图 使用indented方式布局时,direction取不同值时的效果如下所示。

LR RL H

indented配置项

名称 类型 默认值 描述
indent number 20 与直接父节点的缩进值
getVGap Function 18 指定节点之间的垂直间距
getHeight Function 36 指定节点的高度

mindmap

mindmap示意图

mindmap配置项

名称 类型 默认值 描述
getId Function 指定节点ID
getHeight Function 36 指定节点高度
getWidth Function 18 指定节点宽度
getSide Function 指定当前节点在主题的左边 (left) 还是右边 (right)
getSubTreeSep Function 0 指定子节点之间的高度间隔
getVGap Function 18 指定节点的垂直间距
getHGap Function 18 指定节点的水平间距

更新

addChild(data, parent)

在指定的父节点下添加子树。

参数

名称 类型 是否必选 描述
data object true 子树的数据
parent Node string true

用法

const data = {
  id: 'sub1',
  children: [
    {
      id: 'subTree1',
      children: [...]
    }, 
    {
      id: 'subTree2',
      children: [...]           
    }
  ]
};

treeGraph.addChild(data, 'root')

updateChild(data, parent)

更新数据,差量更新子树。

参数

名称 类型 是否必选 描述
data object true 子树的数据
parent Node string false

⚠️**注意:**当parent参数为空时则全量更新。

用法

const data = {
  id: 'sub1',
  children: [
    {
      id: 'subTree1',
      children: [...]
    }, 
    {
      id: 'subTree2',
      children: [...]           
    }
  ]
};

treeGraph.updateChild(data, 'root')

removeChild(id)

删除指定的子树。

参数

名称 类型 是否必选 描述
id string true 要删除的子树的ID

用法

treeGraph.removeChild('sub')

布局

changeLayout(layout)

更改并应用指定的布局。

参数

名称 类型 是否必选 描述
layout object false 指定的布局配置,如不传,则不做变更

用法

const layout = {
	type: 'mindmap',
  dirction: 'H',
  getSubTreeSep: () => 20,
  getVGap: () => 25,
  getHeight: () => 30,
  getWidth: () => 30
}
treeGraph.changeLayout(layout)

refreshLayout(fitView)

数据变更后,重新布局,刷新视图,并更新到画布。

参数

名称 类型 是否必选 描述
fitView boolean false 更新布局后,是否需要自适应窗口

用法

treeGraph.refreshLayout(true)

查找

findDataById(id, target)

根据指定的ID获取对应的源数据。

参数

名称 类型 是否必选 描述
id string true 指定的元素ID
target object false 从指定的节点开始查找,为空时从根节点开始查找

返回值

  • 返回值类型object
  • 返回值为查找到的节点的源数据。

用法

const target = {
	id: 'sub1',
  children: [...]
}

// 从target节点开始查找sub1.1节点
const subData = treeGraph.findDataById('sub1.1', target)
  
// 从根节点开始查找sub1.1节点
const subData = treeGraph.findDataById('sub1.1')