Graphics Shape Properties

10 min read

An item (node/edge) in G6 Consists of One or More Graphics Shape. You can add shapes to a custom item by group.addShape in the draw function of registering item. The shapes in G6:

The Common Properties of Shapes

NameDescriptionRemark
fillThe color or gradient color for filling.The corresponding property in canvas is fillStyle.
strokeThe color, gradient color, or pattern for stroke.The corresponding property in canvas is strokeStyle.
lineWidthThe width of the stroke
lineDashThe lineDash of the strokeNumber[] are the lengths of the lineDash
shadowColorThe color for shadow.
shadowBlurThe blur level for shadow.Larger the value, more blur.
shadowOffsetXThe horizontal offset of the shadow.
shadowOffsetYThe vertical offset of the shadow.
opacityThe opacity (alpha value) of the shape.The corresponding property in canvas is globalAlpha.
cursorThe type of the mouse when hovering the node. The options are the same as cursor in CSS

Usage

group.addShape('rect', {
  attrs: {
    fill: 'red',
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowColor: 'blue',
    shadowBlur: 10,
    opacity: 0.8,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'rect-shape',
});

The Common Functions of Shapes

attr()

Get or set the shape's attributes.

attr(name)

Get the shape's attribute named name.

const width = shape.attr('width');

attr(name, value)

Update the shape's attribute named name with value.

attr({...})

Update the shape's multiple attributes.

rect.attr({
    fill: '#999',
    stroke: '#666'
});

Circle

Property

NameDescription
xThe x coordinate of the center
yThe y coordinate of the center
rThe radius

Usage

group.addShape('circle', {
  attrs: {
    x: 100,
    y: 100,
    r: 50,
    fill: 'blue',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'circle-shape',
});

Rect

Property

NameDescriptionRemark
xThe x coordinate of the left top
yThe y coordinate of the left top
widthThe width of the rect
heightThe height of the rect
radiusThe border radius.It can be an integer or an array, representing the border radii of lefttop, righttop, rightbottom, leftbotton respectively.
- radius: 1 or radius: [ 1 ] is equal to radius: [ 1, 1, 1, 1 ]
- radius: [ 1, 2 ] is equal to radius: [ 1, 2, 1, 2 ]
- radius: [ 1, 2, 3 ] is equal to radius: [ 1, 2, 3, 2 ]

Usage

group.addShape('rect', {
  attrs: {
    x: 150,
    y: 150,
    width: 150,
    height: 150,
    stroke: 'black',
    radius: [2, 4],
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'rect-shape',
});

Ellipse

Property

NameDescription
xThe x coordinate of the center
yThe y coordinate of the center
rxThe horizontal radius of the ellipse
ryThe vertical radius of the ellipse

Usage

group.addShape('ellipse', {
  attrs: {
    x: 100,
    y: 100,
    rx: 50,
    ry: 50,
    fill: 'blue',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'ellipse-shape',
});

Polygon

Property

NameDescriptionRemark
pointsA set of vertexes' coordinates of the polygonIt is an array

Usage

group.addShape('polygon', {
  attrs: {
    points: [
      [30, 30],
      [40, 20],
      [30, 50],
      [60, 100],
    ],
    fill: 'red',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'polygon-shape',
});

Image

Property

NameDescriptionRemark
xThe x coordinate of the left top of the image
yThe y coordinate of the left top of the image
widthThe width of the image
heightThe height of the image
imgThe source of the imageSupports: url, ImageData, Image, and canvas

Usage

group.addShape('image', {
  attrs: {
    x: 0,
    y: 0,
    img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'image-shape',
});

Marker

Property

NameDescriptionRemark
xThe x coordinate of the center
yThe y coordinate of the center
rThe radius of the marker
symbolThe shapeWe built in some commonly used shapes for it: circlesquare, diamondtriangle, and triangle-down. You can customize it by path

Usage

group.addShape('marker', {
  attrs: {
    x: 10,
    y: 10,
    r: 10,
    symbol: function(x, y, r) {
      return [['M', x, y], ['L', x + r, y + r], ['L', x + r * 2, y], ['Z']];
    },
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'marker-shape',
});

Path

  ⚠️Attention: When the edge is too thin to be hitted by mouse, set lineAppendWidth to enlarge the hitting area.

Property

NameDescriptionRemark
pathThe path.It can be a String, or an Array of path
startArrowThe arrow on the start of the pathWhen startArrow is true, show a default arrow on the start of the path. User can customize an arrow by path
endArrowThe arrow on the end of the pathWhen startArrow is true, show a default arrow on the end of the path. User can customize an arrow by path
lineAppendWidthThe hitting area of the pathEnlarge the hitting area by enlarging its value
lineCapThe style of two ends of the path
lineJoinThe style of the intersection of two path
lineWidthThe line width of the current path
miterLimitThe maximum miter length
lineDashThe style of the dash lineIt is an array that describes the length of gaps and line segments. If the number of the elements in the array is odd, the elements will be dulplicated. Such as [5, 15, 25] will be regarded as [5, 15, 25, 5, 15, 25]

Usage

group.addShape('path', {
  attrs: {
    startArrow: {
      // The custom arrow is a path points at (0, 0), and its tail points to the positive direction of x-axis
      path: 'M 0,0 L 20,10 L 20,-10 Z',
      // the offset of the arrow, nagtive value means the arrow is moved alone the positive direction of x-axis
      // d: -10
    },
    endArrow: {
      // The custom arrow is a path points at (0, 0), and its tail points to the positive direction of x-axis
      path: 'M 0,0 L 20,10 L 20,-10 Z',
      // the offset of the arrow, nagtive value means the arrow is moved alone the positive direction of x-axis
      // d: -10
    },
    path: [
      ['M', 100, 100],
      ['L', 200, 200],
    ],
    stroke: '#000',
    lineWidth: 8,
    lineAppendWidth: 5,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'path-shape',
});

Text

Properties

NameDescriptionRemark
fillThe color or gradient color for filling.The corresponding property in Canvas is fillStyle.
strokeThe color, gradient color, or pattern for stroke.The corresponding property in Canvas is strokeStyle.
shadowColorThe color for shadow.
shadowBlurThe blur level for shadow.Larger the value, more blur.
shadowOffsetXThe horizontal offset of the shadow.
shadowOffsetYThe vertical offset of the shadow.
opacityThe opacity (alpha value) of the shape.The corresponding property in Canvas is globalAlpha.
textAlignThe align way of the text.Options: 'center' / 'end' / 'left' / 'right' / 'start'. 'start' by default.
textBaselineThe base line of the text.Options:
'top' / 'middle' / 'bottom' / 'alphabetic' / 'hanging'. 'bottom' by default.
fontStyleThe font style of the text.The corresponding property in CSS is font-style
fontVariantThe font variant of the text.The corresponding property in CSS is font-variant
fontWeightThe font weight of the text.The corresponding property in CSS is font-weight
fontSizeThe font size of the text.The corresponding property in CSS is font-size
fontFamilyThe font family of the text.The corresponding property in CSS is font-family
lineHeightLine height of the textThe corresponding property in CSS is line-height

Usage

group.addShape('text', {
  attrs: {
    text: 'test text',
    fill: 'red',
    fontWeight: 400,
    shadowOffsetX: 10,
    shadowOffsetY: 10,
    shadowColor: 'blue',
    shadowBlur: 10,
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'text-shape',
});

DOM (svg)

This shape is available only when the renderer is assgined to 'svg' for graph instance.

⚠️ Attention:
  • Only support native HTML DOM, but not react or other components;
  • If you custom a Node type or an Edge type with dom shape, please use the original DOM events instead of events of G6.

Properties

NameDescriptionRemark
htmlThe html value for DOM shape

Usage

group.addShape('dom', {
  attrs: {
    width: cfg.size[0],
    height: cfg.size[1],
    // DOM's html
    html: `
    <div style="background-color: #fff; border: 2px solid #5B8FF9; border-radius: 5px; width: ${cfg.size[0]-5}px; height: ${cfg.size[1]-5}px; display: flex;">
      <div style="height: 100%; width: 33%; background-color: #CDDDFD">
        <img alt="img" style="line-height: 100%; padding-top: 6px; padding-left: 8px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />  
      </div>
      <span style="margin:auto; padding:auto; color: #5B8FF9">${cfg.label}</span>
    </div>
      `
  },
  // must be assigned in G6 3.3 and later versions. it can be any value you want
  name: 'dom-shape',
  draggable: true,
});