核心概念——节点边Combo——内置Combo——内置Combo总览

技术2024-04-17 9

G6 的内置 Combo 包括 circle 和 rect 两种类型，分别如下图所示。

本文将概述 G6 中的各个内置 Combo 类型、内置 Combo 的通用属性、配置方法。各类型 Combo 详细配置项及配置方法见本目录下相应文档。

⚠️ 注意: 使用 Combo 时，必须在示例化图时配置 groupByTypes 设置为 false，图中元素的视觉层级才能合理。

内置 Combo 类型说明

下面表格中显示了内置的各类 Combo，同时对一些特殊的字段进行了说明：

名称描述默认示例circle圆形：- size 是单个数字，表示直径- 圆心位置对应 Combo 的位置- color 字段默认在描边上生效- 标签文本默认在 Combo 正上方- 更多字段见 Circle Combo 教程- Demorect矩形：- size 是数组，例如：[100, 50]- 矩形的中心位置是 COmbo 的位置，而不是左上角- color 字段默认在描边上生效- 标签文本默认在 Combo 左上角- 更多字段见 Rect Combo 教程- Demo

Combo 的通用属性

所有内置的 Combo 支持的通用属性：

属性名类型是否必须示例说明idstringtrue'comboA'一个 Combo 的唯一标识，必须是 string 类型，必须唯一typestringfalse'rect'指定该 Combo 的类型，可以是内置 Combo 的类型名，也可以是自定义 Combo 的类型名。默认是 'circle'parentIdstringfalse'comboB'该 Combo 的父 Combo 的 IDsizefalseNumber / Array30 或 [30, 20]Combo 的最小大小，默认 'circle' 类型 Combo 的 size 为 20，'rect' 类型的为 [20, 5]paddingNumber / Number[]false10 或 [ 10, 20, 10, 20 ]该 Combo 内边距，默认 'circle' 类型 Combo 的 padding 为 25，'rect' 类型的为 [25, 20, 15, 20]styleObjectfalse该 Combo 的样式配置项labelstringfalse'Combo A'该 Combo 的文本标签labelCfgObjectfalse该 Combo 的文本标签样式配置项

样式属性 style

Object 类型。通过 style 配置来修改 Combo 的填充色、边框颜色、阴影等属性。下表是 style 对象中常用的配置项：

名称是否必须类型备注fillfalseStringCombo 填充色strokefalseStringCombo 的描边颜色lineWidthfalseNumber描边宽度shadowColorfalseString阴影颜色shadowBlurfalseNumber阴影范围shadowOffsetXfalseNumber阴影 x 方向偏移量shadowOffsetYfalseNumber阴影 y 方向偏移量opacityfalseNumber设置绘图的当前 alpha 或透明值fillOpacityfalseNumber设置填充的 alpha 或透明值cursorfalseString鼠标在该 Combo 上时的鼠标样式，CSS 的 cursor 选项都支持

下面代码演示在实例化图时全局配置方法中配置 style：

const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理 groupByTypes: false, defaultCombo: { // ... 其他属性 style: { fill: '#steelblue', stroke: '#eaff8f', lineWidth: 5, // ... 其他属性 }, }, });

标签文本 label 及其配置 labelCfg

label String 类型。标签文本的文字内容。labelCfg Object 类型。配置标签文本。下面是 labelCfg 对象中的常用配置项：

名称是否必须类型备注positionfalseString文本相对于 Combo 的位置，目前支持的位置有: 'center'，'top'，'left'，'right'，'bottom'。默认为 'top'refXfalseNumber文本的偏移，在 x 方向上的偏移量refYfalseNumber文本的偏移，在 y 方向上的偏移量stylefalseObject标签的样式属性。

上表中的标签的样式属性 style 的常用配置项如下：

名称是否必须类型备注fillfalseString文本颜色strokefalseString文本描边颜色lineWidthfalseNumber文本描边粗细opacityfalseNumber文本透明度fontSizefalseNumber文本字体大小fontFamilyfalseNumber文字字体... Combo 标签与节点、边标签样式属性相同，统一整理在 Text 图形 API

下面代码演示在实例化图时全局配置方法中配置 label 和 labelCfg。

const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理 groupByTypes: false, defaultCombo: { // ... 其他属性 labelCfg: { position: 'top', offset: [10, 10, 10, 10], style: { fill: '#666', }, }, }, });

Combo 的配置方法

配置 Combo 的方式有三种：实例化图时全局配置，在数据中动态配置，使用 graph.combo(comboFn) 函数配置。这几种配置方法可以同时使用，优先级：

使用 graph.combo(comboFn) 配置 > 数据中动态配置 > 实例化图时全局配置

即有相同的配置项时，优先级高的方式将会覆盖优先级低的。

实例化图时全局配置

用户在实例化 Graph 时候可以通过 defaultCombo 配置 Combo ，这里的配置是全局的配置，将会在所有 Combo 上生效。

const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理 groupByTypes: false, defaultCombo: { type: 'circle', // 其他配置 }, });

在数据中动态配置

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

const data = { nodes: [ ... // 节点 ], edges: [ ... // 边 ], combos: [{ id: 'combo0', size: 100, type: 'circle', ... // 其他属性 style: { ... // 样式属性，每种 Combo 的详细样式属性参见各类型 Combo 文档 } },{ id: 'combo1', size: [50, 100], type: 'rect', ... // 其他属性 style: { ... // 样式属性，每种 Combo 的详细样式属性参见各类型 Combo 文档 } }, // 其他 combo ] }

使用 graph.combos()

该方法可以为不同 combo 进行不同的配置。

提示:

该方法必须在 render 之前调用，否则不起作用；由于该方法优先级最高，将覆盖其他地方对 combo 的配置，这可能将造成一些其他配置不生效的疑惑；该方法在增加元素、更新元素时会被调用，如果数据量大、每个 Combo 上需要更新的内容多时，可能会有性能问题。 // const data = ... // const graph = ... graph.combo(combo => { return { id: combo.id, type: 'rect', style: { fill: 'blue', }, }; });

graph.data(data); graph.render();

示例

const data = { nodes: [{ id: 'node1', label: 'Node1', comboId: 'rect_combo' }, { id: 'node2', label: 'Node 2' }], combos: [ { id: 'circle_combo', type: 'circle', label: 'Circle', }, { id: 'rect_combo', type: 'rect', label: 'Rect', }, ], };

const graph = new G6.Graph({ container: ‘mountNode’, width: 1500, height: 300, // 必须将 groupByTypes 设置为 false，带有 combo 的图中元素的视觉层级才能合理 groupByTypes: false, }); graph.data(data); graph.render();

显示结果：

调整 Combo 配置

下面演示通过将配置写入数据的方式，调整 id 为 'rect_combo' 的文本位置、颜色、样式。将下面代码替换上面代码中 id 为 'rect_combo' 的 combo 数据即可生效。

{ id: 'rect_combo', type: 'rect', label: 'Rect Combo', labelCfg: { position: 'bottom', refX: 5, refY: -12, style: { fill: '#fff' } }, style: { fill: '#fa8c16', stroke: '#000', lineWidth: 2 } }