G6

Hull is used to process and represent the convex polygon bounding box of a set of points. Hull has two forms: convex hull and concave hull.

Convex Hull: This is a convex polygon that contains all points and has no concave. You can think of it as the smallest bounding box of a set of points, with no points outside the polygon.

Concave Hull: This is a concave polygon that also contains all points, but may have concave. The concavity of the concave hull is controlled by the concavity parameter. The larger the concavity, the smaller the concave. When concavity is Infinity, the concave hull becomes a convex hull.

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');
  },
);

Options

Required type

string

Plugin type

label

boolean Default: true

Whether to display the label

concavity

number Default: Infinity

Concavity. Default is Infinity, which means Convex Hull

corner

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

Corner type

members

string__[]

Elements in Hull

padding

number Default: 10

Padding

Label Style

label{TextStyleProps}

An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format.

TextStyleProps includes the following properties:

fill
fontSize
fontWeight
...

icon{TextStyleProps} means you need to use the following property names:

iconFill
iconFontSize
iconFontWeight
...

labelAutoRotate

boolean Default: true

Whether the label rotates with the contour. Only effective when closeToPath is true

labelCloseToPath

boolean Default: true

Whether the label is close to the contour

labelMaxWidth

number

The maximum width of the text, which will be automatically ellipsis if exceeded

labelOffsetX

number Default: 0

Label x-axis offset

labelOffsetY

number Default: 0

Label y-axis offset

labelPlacement

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

Label position

labelBackground

boolean

Whether to show background

labelPadding

number | number[] Default: 0

Label padding

Label Background Style

labelBackground{RectStyleProps}

An expression like icon{TextStyleProps} indicates that properties of the TextStyleProps type are prefixed with icon in camelCase format.

TextStyleProps includes the following properties:

fill
fontSize
fontWeight
...

icon{TextStyleProps} means you need to use the following property names:

iconFill
iconFontSize
iconFontWeight
...

API

Hull.addMember(members)

Add Hull member

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

View Parameters

Parameter	Type	Description
members	string \| string[]	元素 Ids

Returns:

Type: void

Hull.getMember()

Get Hull member

getMember(): string[];

View Parameters

Returns:

Type: string[]
Description: 元素 Ids

Hull.removeMember(members)

Remove Hull member

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

View Parameters

Parameter	Type	Description
members	string \| string[]	元素 Ids

Returns:

Type: void

Hull.updateMember(members)

Update Hull member

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

View Parameters

Parameter	Type	Description
members	string[] \| ((prev: string[]) => string[])	元素 Ids

Returns:

Type: void