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',
}