G6

Image

G6

Image

Loading...

Overview

The image node is a rectangular area used to display images.

Applicable scenarios:

Used to represent user avatars, product images, or icons.
Suitable for representing social networks, product catalogs, or icon collections.
Commonly used in social network graphs, product images, UI design, etc.

Online Experience

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [
        {
          id: 'node1',
          style: {
            size: 60,
            src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
          },
        },
      ],
    },
    node: { type: 'image' },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 220 },
  (gui, graph) => {
    gui.add({ type: 'image' }, 'type').disable();

    const options = {
      size: 60,
      src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
    };
    const optionFolder = gui.addFolder('image.style');
    optionFolder.add(options, 'size', 0, 100, 1);
    optionFolder.add(options, 'src');

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

设置 node.type 为 image 以使用图片节点。

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
img	Alias for the img attribute	string	-
src	Image source, i.e., image URL string	string	-	✓

Example

Built-in Image Node Effect

Loading...

Overview

The image node is a rectangular area used to display images.

Applicable scenarios:

Used to represent user avatars, product images, or icons.
Suitable for representing social networks, product catalogs, or icon collections.
Commonly used in social network graphs, product images, UI design, etc.

Online Experience

createGraph(
  {
    autoFit: 'center',
    data: {
      nodes: [
        {
          id: 'node1',
          style: {
            size: 60,
            src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
          },
        },
      ],
    },
    node: { type: 'image' },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 220 },
  (gui, graph) => {
    gui.add({ type: 'image' }, 'type').disable();

    const options = {
      size: 60,
      src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
    };
    const optionFolder = gui.addFolder('image.style');
    optionFolder.add(options, 'size', 0, 100, 1);
    optionFolder.add(options, 'src');

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

设置 node.type 为 image 以使用图片节点。

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
img	Alias for the img attribute	string	-
src	Image source, i.e., image URL string	string	-	✓