G6

Hexagon

G6

Hexagon

Loading...

Overview

A hexagon is a geometric shape with six equal sides, featuring a honeycomb structure.

Applicable scenarios:

Used to represent honeycomb networks, molecular structures, or tightly packed nodes.
Suitable for representing network topology, molecular diagrams, or game maps.
Commonly used in network diagrams, topology diagrams, game design, etc.

Online Experience

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

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

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

设置 node.type 为 hexagon 以使用六边形节点。

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
outerR	Outer radius, the distance from the hexagon's center to any vertex	number	Half of the minimum of width and height

Example

Built-in Hexagon Node Effect

Loading...

Overview

A hexagon is a geometric shape with six equal sides, featuring a honeycomb structure.

Applicable scenarios:

Used to represent honeycomb networks, molecular structures, or tightly packed nodes.
Suitable for representing network topology, molecular diagrams, or game maps.
Commonly used in network diagrams, topology diagrams, game design, etc.

Online Experience

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

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

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

设置 node.type 为 hexagon 以使用六边形节点。

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
outerR	Outer radius, the distance from the hexagon's center to any vertex	number	Half of the minimum of width and height