Image

5 min read

Image

A built-in node Circle has the default style as below, the label is drawed on the bottom of it.
img

Usage

As stated in Built-in Nodes , there are three methods to configure nodes: Configure nodes globally when instantiating a Graph; Configure nodes in their data; Configure nodes by graph.node(nodeFn). Their priorities are:

graph.node(nodeFn) > Configure in data > Configure globally

⚠️ Attention: Expect for id, and label which should be assigned to every single node data, the other configurations in The Common Property and in each node type (refer to doc of each node type) support to be assigned by the three ways.

1 实例化图时全局配置

Assign type to 'image' in the defaultNode object when instantiating a Graph:

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    type: 'image',
    label: 'AntV Team',
    // Other configuraltions
  },
});

2 Configure in the Data

To configure different nodes with different properties, you can write the properties into the node data.

const data = {
  nodes: [{
    id: 'node0',
  	img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',
    type: 'image',
    size: 200,
    label: 'AntV Team',
    labelCfg: {
      position: 'bottom'
    },
    // The configurations for clipping the image
    clipCfg: {
      show: false,
      type: 'circle',
      r: 15
    }
  },
    ... // Other nodes
  ],
  edges: [
    ... // edges
  ]
}

Property

The Node Common Properties are available for Image node, some special properties are shown below. The property with Object type will be described after the table:

img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',
size: 200,
  labelCfg: {
    position: 'bottom'
  },
  // The configurations for clipping the image
  clipCfg: {
    show: false,
    type: 'circle',
    // circle
    r: 15,
    // ellipse
    rx: 10,
    ry: 15,
    // rect
    width: 15,
    height: 15,
    // Coordinates
    x: 0,
    y: 0
  }
NameDescriptionTypeRemark
imgThe URL addgressStringspecial property for image node
sizeThe size of the nodeNumberArrayWhen it is a number, the width and the height are the same
labelThe text of the labelString
labelCfgThe configurations for the labelObjectThe Node Common Label Configurations are available.
clipCfgThe configurations for clippingObjectDo not clip by default. It is a special property for image node

clipCfg

NameDescriptionTypeRemark
typeThe type of shape of clippingStringOptions: 'circle', 'rect', 'ellipse'
xThe x coordinate of the clipping shapeNumber0 by default. Only takes effect when the type is 'circle', 'rect', or 'ellipse'
yThe y coordinate of the clipping shapeNumber0 by default. Only takes effect when the type is 'circle', 'rect', or `'ellipse'
showWhether to clip the imageBooleanDo not clip by default.
rThe radius of circle clippingNumberTakes effect when the type is 'circle'
widthThe width of the clippingNumberTakes effect when the type is 'rect'
heightThe height of the clippingNumberTakes effect when the type is 'rect'
rxThe major radius of the ellipse clippingNumberTakes effect when the type is 'ellipse'
ryThe minor radius of the ellipse clippingNumberTakes effect when the type is 'ellipse'

There are default values for all the types of clipping. The following code shows how to configure the clipCfg when instantiating a Graph:

const data = {
  nodes: [
    {
      x: 100,
      y: 100,
      type: 'image',
      label: 'image',
    },
  ],
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultNode: {
    // type: 'image',  // The type has been assigned in the data, we do not have to define it any more
    clipCfg: {
      show: true,
      type: 'circle',
    },
  },
});
graph.data(data);
graph.render();

Clippling Type

Cicle Clipping

circle When the type in clipCfg is 'circle':

clipCfg: {
  show: true,
  type: 'circle',
  r: 100
}
img
Rect Clipping

rect

When the type in clipCfg is 'rect':

clipCfg: {
  show: true,
  type: 'rect',
  x: -50,
  y: -50,
  width: 100,
  height: 100
}
img
Ellipse Clipping

ellipse

When the type in clipCfg is 'ellipse':

clipCfg: {
  show: true,
  type: 'ellipse',
  rx: 100,
  ry: 60
}
img