antv/g6元素之combo

元素之combo"/>

antv/g6元素之combo

介绍

在 G6 中，“Combo” 是一种特殊的元素，用于组合和展示多个节点元素的一种方式。它通常用于表示一个组或子图，将多个相关节点组织在一起，并在图形中以单一的形状显示。

属性

1. type：Combo 的类型，通常是一个字符串，用于标识 Combo 的种类。

2. id：Combo 的唯一标识符，通常是一个字符串或数值。

3. parentId：指示 Combo 的父级 Combo 的 ID。这用于创建 Combo 嵌套结构。

4. style：Combo 的样式属性，包括但不仅与：

   • fill：Combo 的填充颜色。
   • stroke：Combo 的边框颜色。
   • lineWidth：Combo 的边框宽度。
   • opacity：Combo 的不透明度。
   • cursor：鼠标在该 Combo 上时的鼠标样式，

5. size（可选）：Combo 的最小尺寸（非固定尺寸）。可以是一个数字或数组，用于定义 Combo 的最小宽度和高度。例如，如果是数字 30，则表示宽度和高度都为 30；如果是数组 [30, 20]，则表示宽度为 30，高度为 20。默认情况下，‘circle’ 类型 Combo 的 size 为 20，‘rect’ 类型的为 [20, 5]。

6. fixSize（可选）：固定该 Combo 的尺寸，不指定时 Combo 大小由内部元素的分布和大小来决定。可以是一个数字或数组，用于定义固定宽度和高度。例如，如果是数字 10，则表示宽度和高度都为 10；如果是数组 [10, 20]，则表示宽度为 10，高度为 20。即使该 Combo 在收起状态下仍然保持 fixSize 指定的尺寸。

7. fixCollapseSize（可选）：固定该 Combo 收起时的尺寸，不指定时，若未指定 fixSize 则由 size 决定收起时的尺寸，否则统一为 fixSize 尺寸。

8. padding（可选）：Combo 的内边距。可以是一个数字或数组，用于定义 Combo 内部的上、右、下、左边距。例如，如果是数字 10，则上、右、下、左边距都为 10；如果是数组 [10, 20, 10, 20]，则分别表示上、右、下、左边距为 10、20、10、20。默认情况下，‘circle’ 类型 Combo 的 padding 为 25，‘rect’ 类型的为 [25, 20, 15, 20]。

9. label（可选）：Combo 的文本标签，用于显示描述 Combo 的文本。

10. labelCfg（可选）：Combo 的文本标签样式配置项，用于定义文本标签的样式，如字体、颜色等。

11. collapsed（可选）：指示 Combo 是否处于收起状态。如果设置为 true，则 Combo 会在渲染时默认为收起状态。

12. collapsedSubstituteIcon（可选，v4.6.8 起支持）：用于指定在 Combo 收起状态下替代的图标样式或配置。

配置

在 AntV G6 中，您可以使用配置对象来创建和自定义 Combo 元素。配置对象是一个包含 Combo 属性的 JavaScript 对象，它用于定义 Combo 元素的类型、样式、行为等属性。以下是如何配置 Combo 元素的方法：

1. 创建 Combo 类型：
   在创建 Combo 元素之前，您通常需要定义 Combo 的类型，以便将其用于特定场景。您可以使用 comboType 属性来指定 Combo 的类型。

const comboType = 'myComboType'; // 定义 Combo 类型

2. 定义 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 包含的节点 IDpadding: [10, 20], // Combo 的内边距anchorPoints: [[0, 0.5], // 连接点 1[1, 0.5], // 连接点 2],
};

3. 将 Combo 添加到图表：
   使用 G6 的 API 将 Combo 对象添加到图表中。

const graph = new G6.Graph({container: 'container', // 图表容器的选择器width: 800,height: 600,// 其他配置项
});graph.addItem('combo', comboConfig); // 将 Combo 添加到图表

通过以上步骤，可以根据需要创建和自定义 Combo 元素。您可以根据实际需求来调整 Combo 的属性，包括样式、文本标签、内边距、连接点等，以使 Combo 元素适应您的图表设计和数据展示。

内置combo

1. 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();

2. 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 交互效果：

1. 单击事件：
   可以为 Combo 元素添加单击事件，以便在用户单击 Combo 时触发特定操作，如展开或折叠 Combo。

graph.on('combo:click', (e) => {const combo = e.item; // 获取被单击的 Combo 元素// 执行单击事件的操作，例如展开或折叠 Combo
});

2. 拖动事件：
   Combo 元素可以支持拖动，您可以为 Combo 元素添加拖动事件，以实现拖动 Combo 的功能。

graph.on('combo:dragstart', (e) => {// 拖动开始时的操作
});graph.on('combo:drag', (e) => {// 拖动过程中的操作
});graph.on('combo:dragend', (e) => {// 拖动结束时的操作
});

3. 鼠标悬停事件：
   当用户将鼠标悬停在 Combo 元素上时，可以触发相应的事件。

graph.on('combo:mouseenter', (e) => {// 鼠标进入 Combo 时的操作
});graph.on('combo:mouseleave', (e) => {// 鼠标离开 Combo 时的操作
});

4. 缩放和平移：
   用户可以缩放和平移整个图表，您可以设置 Combo 元素的属性，使其跟随缩放和平移。

comboConfig = {// 其他属性// ...allowZoom: true, // 允许 Combo 跟随缩放allowDrag: true, // 允许 Combo 跟随平移
};

5. 其他交互效果：
   也可以根据需要自定义其他交互效果，如双击事件、右键单击事件等，以实现特定的功能和用户体验。

自定义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');