g6学习笔记三(Graph）

原创已于 2023-02-23 14:31:05 修改 · 5.7k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#学习

于 2023-02-23 14:30:19 首次发布

g6 专栏收录该内容

3 篇文章

订阅专栏

G6是一个图形可视化库，Graph是其图表的载体，用于处理节点实例操作和事件监听。文章详细介绍了Graph的配置选项，如布局、交互模式、数据操作方法，以及视口、元素和Combo的相关操作，展示了如何创建、更新和管理图表数据。

Graph 是 G6 图表的载体，所有的 G6 节点实例操作以及事件，行为监听都在 Graph 实例上进行

1.graph的使用和数据结构

const graph = new G6.Graph({
  container: '', // 图的 DOM 容器
  width: 500,    // 画布宽度
  height: 500,   // 画布高度
  layout: {
    type: 'radial',
    unitRadius: 50,
    center: [500, 300],
  },
  fitView: true, // 是否开启画布自适应
  fitViewPadding: '' //fitView 为 true 时生效,四周留白
  fitCenter: true //图的中心将对齐到画布中心，但不缩放。优先级低于 fitView。
  linkCenter: true, // 指定边是否连入节点的中心。
  groupByTypes: true, // 各种元素是否在一个分组内,当使用 Combo 时，必须将其设置为 false
  autoPaint: true, // 当图中元素更新，或视口变换时，是否自动重绘。
  modes： { // 设置画布的交互模式
    default: ['drag-combo', 'collapse-expand-combo','drag-canvas','scroll-canvas'，'zoom-canvas', 'drag-node', 'click-select', 'tooltip','edge-tooltip', 'activate-relations', 'brush-select', 'lasso-select', 'collapse-expand', 'create-edge'] // 拖动 Combo 收起和展开Combo  拖拽画布 滚轮滚动画布 缩放画布 拖拽节点 点击选中节点 节点文本提示 移到边时触发 移到节点突出显示节点和线 拖动框选节点 自由圈选 展开或收起子树 通过交互创建边
  }, 
  nodeStateStyles: {} // 各个状态下节点的样式
  edgeStateStyles: {} // 各个状态下边的样式
  comboStateStyles: {} // 各个状态下 Combo 的样式
  defaultNode: {} // 默认状态下节点的配置
  defaultEdge: {} // 默认状态下边的配置
  defaultCombo: {} // 默认状态下 Combo 的配置
  plugins: [] // 注册插件
  animate: true // 是否启用全局动画
  animateCfg: {} // 动画配置项
  minZoom: '' // 最小缩放比例
  maxZoom: '' // 最大缩放比例
  layout: {  // 布局配置项
    type: '',
    pipes:
  },
  renderer: 'canvas' / 'svg' // 渲染方式
  enabledStack: true // 是否开启 redo & undo 功能
  maxStep: '' // redo & undo 最大步数

});

2.实例方法

操作数据

graph.data(data)

初始化的图数据，data是一个包括 nodes 数组和 edges 数组的对象

graph.save()

获取图数据。

graph.read(data)

接收数据，并进行渲染，相当于 data 和 render 方法的结合

graph.changeData(data, stack)

更新数据源，根据新的数据重新渲染视图。

data代表数据，stack代表是否入 undo & redo 栈

graph.render()

根据提供的数据渲染视图。

获取/设置

graph.get(key)

根据 key 获取属性值。

graph.set(key, val)

设置属性值。

graph.getContainer()

获取 Graph 的 DOM 容器。

graph.getGroup()

获取 Graph 根图形分组。

graph.getMinZoom()

获取 graph 当前允许的最小缩放比例。

graph.setMinZoom(ratio)

设置 graph 当前允许的最小缩放比例。

graph.getMaxZoom()

获取 graph 当前允许的最大缩放比例。

graph.setMaxZoom(rato)

设置 graph 当前允许的最大缩放比例。

graph.getWidth()

获取 graph 当前的宽度。

graph.getHeight()

获取 graph 当前的高度。

视口操作

graph.getZoom()

获取当前视口的缩放比例。

graph.zoom(ratio, center, animate, animateCfg)

改变视口的缩放比例，在当前画布比例下缩放，是相对比例。

graph.zoomTo(toRatio, center, animate, animateCfg)

缩放视窗窗口到一个固定比例。

graph.changeSize(width, height)

改变画布大小。

graph.translate(dx, dy, animate, animateCfg)

采用相对位移来平移画布。

graph.moveTo(x, y, animate, animateCfg)

采用绝对位移将画布移动到指定坐标。

graph.fitView(padding, rules, animate, animateCfg)

让画布内容适应视口

graph.fitCenter(animate, animateCfg)

平移图到中心将对齐到画布中心，但不缩放。优先级低于 fitView。

graph.focusItem(item, animate, animateCfg)

移动图，使得 item 对齐到视口中心，该方法可用于做搜索后的缓动动画。

元素操作

graph.addItem(type, model, stack)

新增元素（节点和边）

type为元素类型，model为元素数据结构， stack为是否入 undo & redo 栈

graph.removeItem(item, stack)

删除元素，当 item 为 group ID 时候，则删除分组。

graph.updateItem(item, model, stack)

更新元素，包括更新数据、样式等。

graph.refreshItem(item)

刷新指定元素。

graph.refreshPositions()

刷新所有节点边位置

graph.updateCombos()

更新所有 combos 的绘制，包括 combos 的位置和范围

graph.updateCombo(combo)

仅更新 combo 及其所有祖先 combo。

graph.updateComboTree(item, parentId)

更新 Combo 结构，例如移动子树等。

graph.node(nodeFn)

设置各个节点样式及其他配置

graph.edge(edgeFn)

设置各个边样式及其他配置

graph.combo(comboFn)

设置各个 combo 样式及其他配置

graph.showItem(item, stack)

显示指定的元素

graph.hideItem(item, stack)

隐藏指定元素

查找元素

graph.getNodes()

获取图中所有节点的实例。

graph.getEdges()

获取图中所有边的实例。

graph.getCombos()

获取当前图中所有 combo 的实例。

graph.getComboChildren(combo)

获取指定 combo 中所有的子节点及子 combo。

graph.getNeighbors(node, type)

获取邻居节点，type为'source' / 'target' / undefined

graph.find(type, fn)

根据具体规则查找单个元素。

graph.findById(id)

根据 ID，查询对应的元素实例。

graph.findAll(type, fn)

查询所有满足规则的元素。

graph.findAllByState(type, state)

查找所有处于指定状态的元素。

Combo 操作

graph.collapseCombo(combo)

收起指定的 Combo。

graph.expandCombo(combo)

展开指定的 Combo。

graph.collapseExpandCombo(combo)

展开或收缩指定的 Combo。

graph.createCombo(combo, elements, stack)

根据已经存在的节点或 combo 创建新的 combo。

graph.uncombo(combo, stack)

拆解 Combo，即拆分组/解组

graph.updateCombos()

根据子元素的 bbox 更新所有 combos 的绘制，包括 combos 的位置和范围。

graph.updateCombo(combo)

仅更新 combo 及其所有祖先 combo。

graph.updateComboTree(item, parentId)

更新 Combo 结构，例如移动子树等。

元素状态

graph.setItemState(item, state, value)

设置元素状态，元素，状态，（是否启用）

graph.clearItemStates(item, states)

清除元素状态

graph.priorityState(item, state)

将指定状态的优先级提升为最高优先级。

行为模式

graph.setMode(mode)

切换图行为模式

graph.getCurrentMode()

获取当前的行为模式。

事件绑定/解绑

graph.on(eventName, handler)

为图绑定事件监听（事件名，监听函数）

handler函数的参数e.item为被操作的 item，e.target被操作的具体图形

graph.emit(eventName, params)

手动触发某个事件

graph.off(eventName, handler)

为图解除指定的事件监听。

graph.off(eventName)

为图解除某事件的所有监听。

布局

graph.layout()

重新以当前配置的属性进行一次布局

graph.updateLayout(cfg)

更新布局配置项。

destroyLayout()

销毁布局方法

增删复合交互

graph.addBehaviors(behaviors, modes)

新增行为

graph.removeBehaviors(behaviors, modes)

移除行为

graph.updateBehavior(behavior, mode)

更新某个模式下的 behavior 的参数。

graph.clear()

清除画布元素