G6

Star

G6

Star

Loading...

Overview

A star is a polygonal geometric shape with prominent points.

Applicable scenarios:

Used to represent important nodes, special markers, or decorative elements.
Suitable for representing flowcharts, network diagrams, or topology diagrams.
Commonly used in flowcharts, network diagrams, topology diagrams, etc.

Online Experience

createGraph(
  {
    autoFit: 'center',
    data: { nodes: [{ id: 'node1', style: { size: 40, fill: '#7e3feb' } }] },
    node: { type: 'star' },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 220 },
  (gui, graph) => {
    gui.add({ type: 'star' }, 'type').disable();

    const options = {
      size: 40,
      innerR: 0,
    };
    const optionFolder = gui.addFolder('star.style');
    optionFolder.add(options, 'size', 0, 100, 1);
    optionFolder.add(options, 'innerR', 0, 100);

    optionFolder.onChange(({ property, value }) => {
      graph.updateNodeData([{ id: 'node1', style: { [property]: value } }]);
      graph.render();
    });
  },
);

设置 node.type 为 star 以使用星形节点。

Style Configuration

If the element has specific attributes, we will list them below. For all general style attributes, see BaseNode

Attribute	Description	Type	Default	Required
innerR	Inner radius, the distance from the star's center to the inner vertex	number	Default is 3/8 of the outer radius

Structure Description:

Example

Built-in Star Node Effect

Loading...

Overview

A star is a polygonal geometric shape with prominent points.

Applicable scenarios:

Used to represent important nodes, special markers, or decorative elements.
Suitable for representing flowcharts, network diagrams, or topology diagrams.
Commonly used in flowcharts, network diagrams, topology diagrams, etc.

Online Experience

createGraph(
  {
    autoFit: 'center',
    data: { nodes: [{ id: 'node1', style: { size: 40, fill: '#7e3feb' } }] },
    node: { type: 'star' },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 220 },
  (gui, graph) => {
    gui.add({ type: 'star' }, 'type').disable();

    const options = {
      size: 40,
      innerR: 0,
    };
    const optionFolder = gui.addFolder('star.style');
    optionFolder.add(options, 'size', 0, 100, 1);
    optionFolder.add(options, 'innerR', 0, 100);

    optionFolder.onChange(({ property, value }) => {
      graph.updateNodeData([{ id: 'node1', style: { [property]: value } }]);
      graph.render();
    });
  },
);

设置 node.type 为 star 以使用星形节点。

Style Configuration

If the element has specific attributes, we will list them below. For all general style attributes, see BaseNode

Attribute	Description	Type	Default	Required
innerR	Inner radius, the distance from the star's center to the inner vertex	number	Default is 3/8 of the outer radius

Structure Description: