Atomic Shapes and Their Properties

Elements (nodes/edges) in G6 are composed of one or more shapes, mainly added via upsert in the render method when customizing nodes or edges. G6 supports the following shapes:

Common Properties of All Shapes

BaseShapeStyle

Property	Description	Type	Required
x	x coordinate	number	✓
y	y coordinate	number	✓
width	Width	number	✓
height	Height	number	✓
fill	Fill color	string \| Pattern \| null
stroke	Stroke color	string \| Pattern \| null
opacity	Overall opacity	number \| string
fillOpacity	Fill opacity	number \| string
strokeOpacity	Stroke opacity	number \| string
lineWidth	Line width	number \| string
lineCap	Line cap style	`butt` \| `round` \| `square`
lineJoin	Line join style	`miter` \| `round` \| `bevel`
lineDash	Dash array	number \| string \| (string \| number)[]
lineDashOffset	Dash offset	number
shadowBlur	Shadow blur	number
shadowColor	Shadow color	string
shadowOffsetX	Shadow X offset	number
shadowOffsetY	Shadow Y offset	number
cursor	Mouse cursor, supports all CSS cursor	string
zIndex	Render z-index	number
visibility	Visibility	`visible` \| `hidden`

Example:

const shape = BaseShape.upsert(
  // Specify the shape key, which must be unique within the same custom element type
  'shape',
  'circle',
  {
    cx: 100,
    cy: 100,
    r: 50,
    fill: 'blue',
  },
  container,
);

Common Methods of All Shapes

attr()

Set or get the drawing attributes of the instance.

attr(name)

Get the value of an attribute.

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

attr(name, value)

Update a single drawing attribute.

attr({...})

Batch update drawing attributes.

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

Circle Shape

CircleStyleProps

Property	Description	Type	Required
cx	Center x coordinate	number \| string	✓
cy	Center y coordinate	number \| string	✓
cz	Center z coordinate	number \| string
r	Radius	number \| string	✓
isBillboard	Billboard mode (always faces camera)	boolean
isSizeAttenuation	Size attenuation (size changes with view)	boolean

Example:

BaseShape.upsert(
  'shape',
  'circle',
  {
    cx: 100,
    cy: 100,
    r: 50,
    fill: 'blue',
  },
  container,
);

Rect Shape

RectStyleProps

Property	Description	Type	Required
x	Rect x coordinate	number \| string
y	Rect y coordinate	number \| string
z	Rect z coordinate	number
width	Rect width	number \| string	✓
height	Rect height	number \| string	✓
isBillboard	Billboard mode	boolean
isSizeAttenuation	Size attenuation	boolean
radius	Border radius	number \| string \| number[]

Example:

BaseShape.upsert(
  'shape',
  'rect',
  {
    x: 100,
    y: 100,
    width: 100,
    height: 100,
    radius: 8,
    fill: 'blue',
  },
  container,
);

Ellipse Shape

EllipseStyleProps

Property	Description	Type	Required
cx	Center x coordinate	number \| string	✓
cy	Center y coordinate	number \| string	✓
cz	Center z coordinate	number \| string
rx	X-axis radius	number \| string	✓
ry	Y-axis radius	number \| string	✓
isBillboard	Billboard mode	boolean
isSizeAttenuation	Size attenuation	boolean

Example:

BaseShape.upsert(
  'shape',
  'ellipse',
  {
    cx: 100,
    cy: 100,
    rx: 50,
    ry: 80,
    fill: 'blue',
  },
  container,
);

HTML DOM

HTMLStyleProps

Property	Description	Type	Required
x	HTML x coordinate	number \| string
y	HTML y coordinate	number \| string
innerHTML	HTML content	string \| HTMLElement	✓
width	HTML width	number \| string
height	HTML height	number \| string

Example:

BaseShape.upsert(
  'shape',
  'html',
  {
    x: 100,
    y: 100,
    innerHTML: <div>content</div>,
  },
  container,
);

Image Shape

ImageStyleProps

Property	Description	Type	Required
x	Image x coordinate	number \| string
y	Image y coordinate	number \| string
z	Image z coordinate	number
src	Image source or HTMLImageElement	string \| HTMLImageElement	✓
width	Image width	number \| string
height	Image height	number \| string
isBillboard	Billboard mode	boolean
isSizeAttenuation	Size attenuation	boolean
billboardRotation	Billboard rotation angle	number
keepAspectRatio	Keep original aspect ratio	boolean

Example:

BaseShape.upsert(
  'shape',
  'image',
  {
    x: 100,
    y: 100,
    src: 'http://',
  },
  container,
);

Line Shape

LineStyleProps

Property	Description	Type	Required
x1	Start x coordinate	number	✓
y1	Start y coordinate	number	✓
x2	End x coordinate	number	✓
y2	End y coordinate	number	✓
z1	Start z coordinate	number
z2	End z coordinate	number
isBillboard	Billboard mode	boolean
isSizeAttenuation	Size attenuation	boolean
markerStart	Marker at start	DisplayObject \| null
markerEnd	Marker at end	DisplayObject \| null
markerStartOffset	Start marker offset	number
markerEndOffset	End marker offset	number

Example:

BaseShape.upsert(
  'shape',
  'line',
  {
    x1: 100,
    y1: 100,
    x2: 150,
    y2: 150,
    stroke: 'blue',
  },
  container,
);

Path Shape

PathStyleProps

Property	Description	Type	Required
d	Path string or array	string \| PathArray	✓
markerStart	Marker at start	DisplayObject \| null
markerEnd	Marker at end	DisplayObject \| null
markerMid	Marker at middle	DisplayObject \| null
markerStartOffset	Start marker offset	number
markerEndOffset	End marker offset	number
isBillboard	Billboard mode	boolean
isSizeAttenuation	Size attenuation	boolean
fillRule	Fill rule	`nonzero` \| `evenodd`

Example:

BaseShape.upsert(
  'shape',
  'path',
  {
    d: 'M 0,0 L 20,10 L 20,-10 Z',
    stroke: 'blue',
  },
  container,
);

Polygon Shape

PolygonStyleProps

Property	Description	Type	Required
points	Array of polygon points	([number, number] \| [number, number, number])[]	✓
markerStart	Marker at start	DisplayObject \| null
markerEnd	Marker at end	DisplayObject \| null
markerMid	Marker at middle	DisplayObject \| null
markerStartOffset	Start marker offset	number
markerEndOffset	End marker offset	number
isClosed	Is polygon closed	boolean
isBillboard	Billboard mode	boolean
isSizeAttenuation	Size attenuation	boolean

Example:

BaseShape.upsert(
  'shape',
  'polygon',
  {
    points: [
      [30, 30],
      [40, 20],
      [30, 50],
      [60, 100],
    ],
    fill: 'red',
  },
  container,
);

Polyline Shape

PolylineStyleProps

Property	Description	Type	Required
points	Array of polyline points	([number, number] \| [number, number, number])[]	✓
markerStart	Marker at start	DisplayObject \| null
markerEnd	Marker at end	DisplayObject \| null
markerMid	Marker at middle	DisplayObject \| null
markerStartOffset	Start marker offset	number
markerEndOffset	End marker offset	number
isBillboard	Billboard mode	boolean
isSizeAttenuation	Size attenuation	boolean

Example:

BaseShape.upsert(
  'shape',
  'polyline',
  {
    points: [
      [30, 30],
      [40, 20],
      [30, 50],
      [60, 100],
    ],
    fill: 'red',
  },
  container,
);

Text

TextStyleProps

Property	Description	Type	Required
x	Text x coordinate	number \| string
y	Text y coordinate	number \| string
z	Text z coordinate	number \| string
text	Text content	number \| string	✓
fontSize	Font size	number \| string
fontFamily	Font family	string
fontStyle	Font style	`normal` \| `italic` \| `oblique`
fontWeight	Font weight	`normal` \| `bold` \| `bolder` \| `lighter` \| number
fontVariant	Font variant	`normal` \| `small-caps` \| string
textAlign	Text horizontal align	`start` \| `center` \| `middle` \| `end` \| `left` \| `right`
textBaseline	Text baseline	`top` \| `hanging` \| `middle` \| `alphabetic` \| `ideographic` \| `bottom'
textOverflow	Text overflow	`clip` \| `ellipsis` \| string
lineHeight	Line height	number \| string
letterSpacing	Letter spacing	number \| string
maxLines	Max lines	number
textPath	Text path	Path
textPathSide	Text path side	`left` \| `right`
textPathStartOffset	Text path start offset	number \| string
textDecorationLine	Text decoration line	string
textDecorationColor	Text decoration color	string
textDecorationStyle	Text decoration style	`solid` \| `double` \| `dotted` \| `dashed` \| `wavy`
isBillboard	Billboard mode	boolean
billboardRotation	Billboard rotation angle	number
isSizeAttenuation	Size attenuation	boolean
wordWrap	Word wrap	boolean
wordWrapWidth	Word wrap width	number
dx	X offset	number \| string
dy	Y offset	number \| string

Example:

BaseShape.upsert(
  'shape',
  'text',
  {
    x: 100,
    y: 100,
    text: 'text',
  },
  container,
);

Display in multiply line:

{
  wordWrap: true,
  wordWrapWidth: 100,
  maxLines: 4,
  textOverflow: 'ellipsis',
}