G6

轮廓包围（Hull）用于处理和表示一组点的凸多边形包围盒。轮廓包围分为两种形态：凸包和凹包。

凸包（Convex Hull）：这是一个凸多边形，它包含所有的点，并且没有任何凹陷。你可以将其想象为一组点的最小包围盒，没有任何点在这个多边形的外部。

凹包（Concave Hull）：这是一个凹多边形，它同样包含所有的点，但是可能会有凹陷。凹包的凹陷程度由 concavity 参数控制。concavity 越大，凹陷越小。当 concavity 为 Infinity 时，凹包就变成了凸包。

createGraph(
  {
    data: {
      nodes: [
        {
          id: 'node-0',
          data: { cluster: 'a' },
          style: { x: 555, y: 151 },
        },
        {
          id: 'node-1',
          data: { cluster: 'a' },
          style: { x: 532, y: 323 },
        },
        {
          id: 'node-2',
          data: { cluster: 'a' },
          style: { x: 473, y: 227 },
        },
        {
          id: 'node-3',
          data: { cluster: 'a' },
          style: { x: 349, y: 212 },
        },
        {
          id: 'node-4',
          data: { cluster: 'b' },
          style: { x: 234, y: 201 },
        },
        {
          id: 'node-5',
          data: { cluster: 'b' },
          style: { x: 338, y: 333 },
        },
        {
          id: 'node-6',
          data: { cluster: 'b' },
          style: { x: 365, y: 91 },
        },
      ],
      edges: [
        {
          source: 'node-0',
          target: 'node-2',
        },
        {
          source: 'node-1',
          target: 'node-2',
        },
        {
          source: 'node-2',
          target: 'node-3',
        },
        {
          source: 'node-3',
          target: 'node-4',
        },
        {
          source: 'node-3',
          target: 'node-5',
        },
        {
          source: 'node-3',
          target: 'node-6',
        },
      ],
    },
    node: {
      style: { labelText: (d) => d.id },
      palette: { field: 'cluster', color: ['#7e3feb', '#ffa940'] },
    },
    behaviors: ['drag-canvas', 'drag-element'],
    plugins: [
      'grid-line',
      {
        type: 'hull',
        key: 'hull-a',
        members: ['node-0', 'node-1', 'node-2', 'node-3'],
        labelText: 'hull-a',
        fill: '#7e3feb',
        stroke: '#7e3feb',
        fillOpacity: 0.1,
        strokeOpacity: 1,
        labelFill: '#fff',
        labelPadding: 2,
        labelBackgroundFill: '#7e3feb',
        labelBackgroundRadius: 5,
      },
    ],
  },
  { width: 600, height: 450 },
  (gui, graph) => {
    const options = {
      type: 'hull',
      members: ['node-0', 'node-1', 'node-2', 'node-3'],
      concavity: Infinity,
      corner: 'rounded',
      padding: 10,
      // style
      fill: '#7e3feb',
      stroke: '#7e3feb',
      fillOpacity: 0.1,
      strokeOpacity: 1,
      // label
      label: true,
      labelCloseToPath: true,
      labelAutoRotate: true,
      labelOffsetX: 0,
      labelOffsetY: 0,
      labelPlacement: 'bottom',
    };

    const optionFolder = gui.addFolder('Hull Options');
    optionFolder.add(options, 'type').disable();
    optionFolder.add(options, 'concavity', 0, 200, 1);
    optionFolder.add(options, 'corner', ['rounded', 'smooth', 'sharp']);
    optionFolder.add(options, 'padding', 0, 20, 1);
    optionFolder.addColor(options, 'fill');
    optionFolder.addColor(options, 'stroke');
    optionFolder.add(options, 'fillOpacity', 0, 1, 0.1);
    optionFolder.add(options, 'strokeOpacity', 0, 1, 0.1);
    optionFolder.add(options, 'label');
    optionFolder.add(options, 'labelCloseToPath');
    optionFolder.add(options, 'labelAutoRotate');
    optionFolder.add(options, 'labelOffsetX', 0, 20, 1);
    optionFolder.add(options, 'labelOffsetY', 0, 20, 1);
    optionFolder.add(options, 'labelPlacement', ['left', 'right', 'top', 'bottom', 'center']);

    optionFolder.onChange(({ property, value }) => {
      graph.updatePlugin({
        key: 'hull-a',
        [property]: value,
      });
      graph.render();
    });

    const apiConfig = {
      member: 'node-1',
    };
    const apiFolder = gui.addFolder('Hull API');
    const instance = graph.getPluginInstance('hull-a');
    apiFolder.add(
      apiConfig,
      'member',
      new Array(7).fill(0).map((_, index) => `node-${index}`),
    );
    apiFolder.add({ addMember: () => instance.addMember(apiConfig.member) }, 'addMember').name('add member');
    apiFolder
      .add({ removeMember: () => instance.removeMember(apiConfig.member) }, 'removeMember')
      .name('remove member');
    apiFolder
      .add({ removeMember: () => alert('Members in Hull-a: ' + instance.getMember()) }, 'removeMember')
      .name('get member');
  },
);

参考示例：

用轮廓包裹节点集合

配置项

Required type

hull | string

此插件已内置，你可以通过 type: 'hull' 来使用它。

label

boolean Default: true

是否显示标签

concavity

number Default: Infinity

凹度，数值越大凹度越小；默认为 Infinity 代表为 Convex Hull

corner

'rounded' | 'smooth' | 'sharp' Default: 'rounded'

拐角类型

members

string__[]

Hull 内的元素

padding

number Default: 10

内边距

Label 样式

label{TextStyleProps}

形如 icon{TextStyleProps} 的表达式表示在 TextStyleProps 属性名前以小驼峰形式加上 icon 前缀

TextStyleProps 包含以下属性：

fill
fontSize
fontWeight
...

icon{TextStyleProps} 表示你需要使用以下属性名：

iconFill
iconFontSize
iconFontWeight
...

labelAutoRotate

boolean Default: true

标签是否跟随轮廓旋转，仅在 closeToPath 为 true 时生效

labelCloseToPath

boolean Default: true

标签是否贴合轮廓

labelMaxWidth

number

文本的最大宽度，超出会自动省略

labelOffsetX

number Default: 0

x 轴偏移量

labelOffsetY

number Default: 0

y 轴偏移量

labelPlacement

'left' | 'right' | 'top' | 'bottom' | 'center' Default: 'bottom'

标签位置

labelBackground

boolean

是否显示背景

labelPadding

number | number[] Default: 0

标签内边距

Label Background 样式

labelBackground{RectStyleProps}

形如 icon{TextStyleProps} 的表达式表示在 TextStyleProps 属性名前以小驼峰形式加上 icon 前缀

TextStyleProps 包含以下属性：

fill
fontSize
fontWeight
...

icon{TextStyleProps} 表示你需要使用以下属性名：

iconFill
iconFontSize
iconFontWeight
...

API

Hull.addMember(members)

添加 Hull 成员

addMember(members: ID | ID[]): void;

参数	类型	描述	默认值	必选
members	ID \| ID[]	成员	-	✓

Hull.getMember()

获取 Hull 成员

getMember(): string[];

返回值：

**类型：**string[]
**描述：**元素 Ids

Hull.removeMember(members)

移除 Hull 成员

removeMember(members: ID | ID[]): void;

参数	类型	描述	默认值	必选
members	ID \| ID[]	成员	-	✓

Hull.updateMember(members)

更新 Hull 成员

updateMember(members: ID[] | ((prev: ID[]) => ID[])): void;

参数	类型	描述	默认值	必选
members	ID[] \| ((prev: ID[]) => ID[])	成员	-	✓

Hull 轮廓包围

配置项

Required type

label

concavity

corner

members

padding

Label 样式

label{TextStyleProps}

labelAutoRotate

labelCloseToPath

labelMaxWidth

labelOffsetX

labelOffsetY

labelPlacement

labelBackground

labelPadding

Label Background 样式

labelBackground{RectStyleProps}

API

Hull.addMember(members)

Hull.getMember()

Hull.removeMember(members)

Hull.updateMember(members)