组合总览

什么是组合

组合(Combo) 全称为 Combination，是 G6 中的一种特殊的图元素，它可以包含节点和子组合，类似“群组”或“容器”的概念。它通常用于表示集合关系，例如一个部门包含多个员工，一个城市包含多个区域等。

:::warning{title=注意} 不推荐在树图中使用 Combo。因为树图的布局与 Combo 的布局机制不兼容，容易导致节点错位或样式混乱。 :::

G6 的内置 Combo 包括 circle（圆形组合）和 rect (矩形组合) 两种类型，分别如下图所示：

数据结构

定义 Combo 时，需要在图的数据对象中添加 combos 字段，每个 Combo 是一个对象，结构如下：

combos 数组中一个数据项的示例：

{
  "id": "combo1",
  "type": "circle",
  "data": { "groupName": "Group A" },
  "style": { "fill": "lightblue", "stroke": "blue", "collapsed": true },
  "states": [],
  "combo": null
}

要将节点归属到某个 Combo，可以在节点数据中添加 combo 字段：

{
  "nodes": [{ "id": "node1", "combo": "comboA" }], // node1 属于 comboA
  "combos": [{ "id": "comboA" }] // 定义 comboA
}

配置方法

配置 Combo 的方式有三种，按优先级从高到低如下：

• 使用 graph.setCombo() 动态配置
• 实例化图时全局配置
• 在数据中动态属性

这几个配置方法可以同时使用。有相同的配置项时，优先级高的方式将会覆盖优先级低的。

使用 graph.setCombo()

可在图实例创建后，使用 graph.setCombo() 动态设置 Combo 的样式映射逻辑。

该方法需要在 graph.render() 之前调用才会生效，并拥有最高优先级。

graph.setCombo({
  style: {
    type: 'circle',
    style: { fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },
  },
});

graph.render();

实例化图时全局配置

在实例化图时可以通过 combo 配置 Combo 样式映射，这里的配置是全局的配置，将会在所有 Combo 上生效。

import { Graph } from '@antv/g6';

const graph = new Graph({
  // 在组合配置中指定组合类型以及组合样式类型
  combo: {
    type: 'circle',
    style: { fill: '#7FFFD4', stroke: '#5CACEE', lineWidth: 2 },
  },
});

在数据中动态配置

如果需要为不同 Combo 进行不同的配置，可以将配置写入到 Combo 数据中。这种配置方式可以通过下面代码的形式直接写入数据：

// 在数据中指定组合类型以及组合样式类型
const data = {
  combos: [
    {
      id: 'combo-1',
      type: 'circle',
      style: { size: 100, stroke: 'orange' },
    },
  ],
};

调整优先级

如果你想让数据中配置的优先级高于全局配置，你可以采取以下方式：

const data = {
  combos: [
    {
      id: 'combo-1',
      type: 'circle',
      style: { size: 100, stroke: 'orange' },
    },
  ],
};

const graph = new Graph({
  combo: {
    type: (d) => d.type || 'rect',
    style: {
      stroke: (d) => d.style.stroke || 'blue',
    },
  },
});

示例

import { Graph, register, Rect, ExtensionCategory } from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'node1',
      combo: 'combo1',
      style: { x: 245, y: 200 },
    },
    {
      id: 'node2',
      combo: 'combo1',
      style: { x: 210, y: 250 },
    },
    {
      id: 'node3',
      combo: 'combo1',
      style: { x: 280, y: 245 },
    },
    {
      id: 'node4',
      combo: 'combo2',
      style: { x: 400, y: 165 },
    },
    {
      id: 'node5',
      combo: 'combo2',
      style: { x: 450, y: 162 },
    },
    {
      id: 'node6',
      combo: 'combo3',
      style: { x: 425, y: 300 },
    },
    {
      id: 'node7',
      combo: 'combo3',
      style: { x: 360, y: 332 },
    },
  ],
  edges: [],
  combos: [
    {
      id: 'combo1',
      combo: 'combo3',
      data: { label: 'Combo A' },
    },
    {
      id: 'combo2',
      combo: 'combo3',
      data: { label: 'Combo B' },
    },
    {
      id: 'combo3',
      data: { label: 'Combo C' },
    },
    {
      id: 'combo4',
      data: { label: 'Combo D' },
      style: { x: 58, y: 248 },
    },
  ],
};

const graph = new Graph({
  container: 'container',
  height: 450,
  data,
  node: {
    style: {
      labelText: (d) => d.id,
      labelPlacement: 'center',
      labelFill: '#fff',
      labelFontSize: 10,
    },
  },
  combo: {
    type: 'circle',
    style: {
      padding: 2,
      labelText: (d) => d.data.label,
      labelPlacement: 'top',
    },
  },
  behaviors: [
    'collapse-expand',
    {
      type: 'drag-element',
      dropEffect: 'link',
    },
  ],
});

graph.render();

import { Graph } from '@antv/g6';
import GUI from 'lil-gui';

export function addPanel(renderPanel: (gui: GUI) => void) {
  const gui = new GUI({ container: document.body });
  gui.title('Control');
  Object.assign(gui.domElement.style, { position: 'absolute', top: '0', right: '0', zIndex: '10' });
  renderPanel(gui);
  addEventListener('pagehide', () => gui.destroy(), { once: true });
}

export async function createGraph(
  options: ConstructorParameters<typeof Graph>[0],
  size: { width?: number; height?: number } = {},
  renderPanel?: (gui: GUI, graph: Graph) => void,
) {
  const container = document.createElement('div');
  Object.assign(container.style, {
    width: '100%',
    maxWidth: `${size.width || 600}px`,
    height: `${size.height || 400}px`,
  });
  document.getElementById('container')!.append(container);
  const graph = new Graph({ ...size, ...options, width: container.clientWidth, container, autoResize: true });
  addEventListener('pagehide', () => graph.destroy(), { once: true });
  await graph.render();
  if (renderPanel) addPanel((gui) => renderPanel(gui, graph));
  return container;
}

Combo 交互

只是简单地将 Combo 渲染出来，并没有多大的实用价值，只有支持一系列的交互操作后，才能最大程度地体现 Combo 的价值。

在 G6 中，我们内置了 drag-element、collapse-expand 三个交互。

drag-element

支持拖动节点和 Combo。拖动 Combo 过程中，会动态改变 Combo 中节点和边的位置，在拖拽完成以后，保持 Combo 和节点的相对位置不变。还可以通过设置 dropEffect: 'link' 在拖拽时改变 Combo 的从属关系。

collapse-expand

支持双击 Combo 收起和展开 Combo ，收起 Combo 以后，隐藏 Combo 中的所有节点，外部节点和 Combo 中节点有连线的情况下，所有连接会连接到 Combo 上面。

自定义组合

当内置组合无法满足需求时，G6 提供了强大的自定义能力：

• 继承内置组合进行扩展
• 创建全新的组合类型

与组合不同，自定义组合需要先注册后使用。详细教程请参考 自定义组合 文档。