介绍
在 G6 中，"Combo" 是一种特殊的元素，用于组合和展示多个节点元素的一种方式。它通常用于表示一个组或子图，将多个相关节点组织在一起，并在图形中以单一的形状显示。
属性
- type：Combo 的类型，通常是一个字符串，用于标识 Combo 的种类。
- id：Combo 的唯一标识符，通常是一个字符串或数值。
- parentId：指示 Combo 的父级 Combo 的 ID。这用于创建 Combo 嵌套结构。
- style：Combo 的样式属性，包括但不仅与：
- fill：Combo 的填充颜色。
- stroke：Combo 的边框颜色。
- lineWidth：Combo 的边框宽度。
- opacity：Combo 的不透明度。
- cursor：鼠标在该 Combo 上时的鼠标样式，
- size（可选）：Combo 的最小尺寸（非固定尺寸）。可以是一个数字或数组，用于定义 Combo 的最小宽度和高度。例如，如果是数字 30，则表示宽度和高度都为 30；如果是数组 [30, 20]，则表示宽度为 30，高度为 20。默认情况下，'circle' 类型 Combo 的 size 为 20，'rect' 类型的为 [20, 5]。
- fixSize（可选）：固定该 Combo 的尺寸，不指定时 Combo 大小由内部元素的分布和大小来决定。可以是一个数字或数组，用于定义固定宽度和高度。例如，如果是数字 10，则表示宽度和高度都为 10；如果是数组 [10, 20]，则表示宽度为 10，高度为 20。即使该 Combo 在收起状态下仍然保持 fixSize 指定的尺寸。
- fixCollapseSize（可选）：固定该 Combo 收起时的尺寸，不指定时，若未指定 fixSize 则由 size 决定收起时的尺寸，否则统一为 fixSize 尺寸。
- padding（可选）：Combo 的内边距。可以是一个数字或数组，用于定义 Combo 内部的上、右、下、左边距。例如，如果是数字 10，则上、右、下、左边距都为 10；如果是数组 [10, 20, 10, 20]，则分别表示上、右、下、左边距为 10、20、10、20。默认情况下，'circle' 类型 Combo 的 padding 为 25，'rect' 类型的为 [25, 20, 15, 20]。
- label（可选）：Combo 的文本标签，用于显示描述 Combo 的文本。
- labelCfg（可选）：Combo 的文本标签样式配置项，用于定义文本标签的样式，如字体、颜色等。
- collapsed（可选）：指示 Combo 是否处于收起状态。如果设置为
true，则 Combo 会在渲染时默认为收起状态。 - collapsedSubstituteIcon（可选，v4.6.8 起支持）：用于指定在 Combo 收起状态下替代的图标样式或配置。
配置
在 AntV G6 中，您可以使用配置对象来创建和自定义 Combo 元素。配置对象是一个包含 Combo 属性的 JavaScript 对象，它用于定义 Combo 元素的类型、样式、行为等属性。以下是如何配置 Combo 元素的方法：
- 创建 Combo 类型：在创建 Combo 元素之前，您通常需要定义 Combo 的类型，以便将其用于特定场景。您可以使用
comboType属性来指定 Combo 的类型。
const comboType = 'myComboType'; // 定义 Combo 类型
- 定义 Combo 配置对象：创建一个包含 Combo 属性的配置对象，包括样式、行为、数据等。以下是一个示例配置对象：
const comboConfig = { type: comboType, // 使用定义的 Combo 类型 id: 'combo1', // Combo 的唯一标识符 label: 'My Combo', // Combo 的文本标签 style: { fill: '#A0C3FF', // Combo 的填充颜色 stroke: '#2B5FFB', // Combo 的边框颜色 lineWidth: 2, // Combo 的边框宽度 opacity: 0.7, // Combo 的不透明度 textStyle: { fill: '#000', // 文本标签的颜色 fontSize: 12, // 文本标签的字体大小 }, }, children: ['node1', 'node2'], // Combo 包含的节点 ID padding: [10, 20], // Combo 的内边距 anchorPoints: [ [0, 0.5], // 连接点 1 [1, 0.5], // 连接点 2 ], };
- 将 Combo 添加到图表：使用 G6 的 API 将 Combo 对象添加到图表中。
const graph = new G6.Graph({ container: 'container', // 图表容器的选择器 width: 800, height: 600, // 其他配置项 }); graph.addItem('combo', comboConfig); // 将 Combo 添加到图表
通过以上步骤，可以根据需要创建和自定义 Combo 元素。您可以根据实际需求来调整 Combo 的属性，包括样式、文本标签、内边距、连接点等，以使 Combo 元素适应您的图表设计和数据展示。
内置combo
- rect Combo 类型："rect" Combo 类型用于创建矩形形状的 Combo 元素。
使用：
const data = { combos: [ { label: 'combo_rect', type: 'rect', label: 'Rect', }, ], }; const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理 groupByTypes: false, defaultCombo: { // type: 'rect', // 在数据中已经指定 type，这里无需再次指定 style: { fill: '#bae637', stroke: '#eaff8f', lineWidth: 5, }, }, }); graph.data(data); graph.render();
circle Combo 类型："circle" Combo 类型用于创建圆形形状的 Combo 元素。它类似于 "rect" Combo，但它以圆形形状表示组或子图，将相关节点组织在一个圆形区域内，并在图形中以圆形形状显示。如下： 
const data = { combos: [ { label: 'combo_circle', type: 'circle', label: 'Circle', }, ], }; const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理 groupByTypes: false, defaultCombo: { // type: 'circle', // 在数据中已经指定 type，这里无需再次指定 style: { fill: '#bae637', stroke: '#eaff8f', lineWidth: 5, }, }, }); graph.data(data); graph.render();
交互
和其他元素一样，也可以Combo 元素添加各种交互效果，以增强用户体验和可视化效果。以下是一些常见的 Combo 交互效果：
- 单击事件：可以为 Combo 元素添加单击事件，以便在用户单击 Combo 时触发特定操作，如展开或折叠 Combo。
graph.on('combo:click', (e) => { const combo = e.item; // 获取被单击的 Combo 元素 // 执行单击事件的操作，例如展开或折叠 Combo });
- 拖动事件：Combo 元素可以支持拖动，您可以为 Combo 元素添加拖动事件，以实现拖动 Combo 的功能。
graph.on('combo:dragstart', (e) => { // 拖动开始时的操作 }); graph.on('combo:drag', (e) => { // 拖动过程中的操作 }); graph.on('combo:dragend', (e) => { // 拖动结束时的操作 });
- 鼠标悬停事件：当用户将鼠标悬停在 Combo 元素上时，可以触发相应的事件。
graph.on('combo:mouseenter', (e) => { // 鼠标进入 Combo 时的操作 }); graph.on('combo:mouseleave', (e) => { // 鼠标离开 Combo 时的操作 });
- 缩放和平移：用户可以缩放和平移整个图表，您可以设置 Combo 元素的属性，使其跟随缩放和平移。
comboConfig = { // 其他属性 // ... allowZoom: true, // 允许 Combo 跟随缩放 allowDrag: true, // 允许 Combo 跟随平移 };
- 其他交互效果：也可以根据需要自定义其他交互效果，如双击事件、右键单击事件等，以实现特定的功能和用户体验。
自定义combo
之前也介绍过自定义节点、自定义边。当然也可以使用G6.registerCombo () 进行自定义扩展内置的 Combo。不过官方介绍最好使用内置rect、circle进行拓展，不建议复写 update 和 draw 方法。
官方给出的注册combo的接口如下：
G6.registerCombo( 'comboName', { /** * 绘制 Combo 中的图形。不需要为默认的 label 增加图形，父类方法会自动增加 label * @param {Object} cfg Combo 的配置项 * @param {G.Group} group 图形分组，Combo 中的图形对象的容器 * @return {G.Shape} 返回一个绘制的图形作为 keyShape，通过 combo.get('keyShape') 可以获取。 * 关于 keyShape 可参考文档 核心概念-节点/边/Combo-图形 Shape 与 keyShape */ drawShape(cfg, group) {}, /** * 绘制后的附加操作，默认没有任何操作 * @param {Object} cfg Combo 的配置项 * @param {G.Group} group 图形分组，Combo 中的图形对象的容器 */ afterDraw(cfg, group) {}, /** * 更新节点后的操作，新增的图形需要在这里控制其更新逻辑 * @override * @param {Object} cfg 节点的配置项 * @param {Combo} combo 节点 */ afterUpdate(cfg, combo) {}, /** * 响应 Combo 的状态变化。 * 在需要使用动画来响应状态变化时需要被复写，其他样式的响应参见下文提及的 [配置状态样式] 文档 * @param {String} name 状态名称 * @param {Object} value 状态值 * @param {Combo} combo 节点 */ setState(name, value, combo) {}, }, // 被继承的 Combo 类型名，可选：'circle' 或 'rect' extendedComboName, );
通过上面的方法，我们就可以实现自定义的combo，这里简单实现一下：
import G6 from "@antv/g6"; export const RegisterCombo = (name: string) => { G6.registerCombo( name, { drawShape(cfg: any, group: any) { // 在此处定义 Combo 元素的绘制方式 // 使用 group 参数绘制 Combo 的形状和样式 const rect = group.addShape("rect", { attrs: { x: 0, y: 0, width: 100, height: 50, fill: "#7FB7FF", stroke: "#2B5FFB", lineWidth: 2, }, name: "my-combo-tect", }); // 添加文本标签 group.addShape("text", { attrs: { x: 50, y: 25, text: cfg.label, fill: "green", fontSize: 12, textAlign: "center", textBaseline: "middle", }, name: "my-combo-text", }); group.addShape("circle", { attrs: { fill: "#fff", stroke: "#999", opacity: 1, x: 50, y: 50, r: 5, }, name: "my-combo-circcle", }); return rect; } }, "rect" ); };
使用还是先注册自定义combo，需要使用自定义combo将type属性设置为自定义name。
const data = { combos: [ { id: "c", label: "Combo C", type: 'my-combo' }, ] } RegisterCombo('my-combo');
在这里插入图片描述
