Arrow
No matter built-in edges or custom edges, arrows can be assigned to the end or begin position of an edge. There are three kinds of arrows in G6: default arrow, built-in arrow, and custom arrow.
Default Arrow
Usage
Configure the endArrow or startArrow to true in the style of an edge:
style: {
endArrow: true,
startArrow: true
}Built-in Arrow
Supported by v3.5.8 and later versions.
Overview
| Name | Parameters | Usage | Result |
|---|---|---|---|
| triangle | The paramters are arrow's width (10 by default), length (15 by default), and offset (0 by default, corresponds to d), respectively. | endArrow: { path: G6.Arrow.triangle(10, 20, 25), d: 25 } |  |
| vee | The paramters are arrow's width (15 by default), length (20 by default), and offset (0 by default, corresponds to d), respectively. | endArrow: { path: G6.Arrow.vee(10, 20, 25), d: 25 } |  |
| circle | The paramters are arrow's radius (5 by default) and offset (0 by default, corresponds to d) respectively. | endArrow: { path: G6.Arrow.circle(10, 25), d: 25 } |  |
| diamond | The paramters are arrow's width (15 by default), length (15 by default), and offset (0 by default, corresponds to d), respectively. | endArrow: { path: G6.Arrow.diamond(10, 20, 25), d: 25 } |  |
| rect | The paramters are arrow's width (10 by default), length (10 by default), and offset (0 by default, corresponds to d), respectively. | endArrow: { path: G6.Arrow.rect(10, 20, 25), d: 25 } |  |
| triangleRect | The paramters are triangle's width (15 by default), triangle's length (20 by default), rect's width (15 by default), rect's length (3 by default), gap between the triangle and the rect (3 by default), and offset (0 by default, corresponds to d), respectively. | endArrow: { path: G6.Arrow.triangleRect(15, 15, 15, 3, 5, 25), d: 25 } |  |
Usage
Call G6.Arrow.arrowName for the path in style's endArrow or startArrow:
style: {
endArrow: {
path: G6.Arrow.triangle(10, 20, 25), // Using the built-in edges for the path, parameters are the width, length, offset (0 by default, corresponds to d), respectively
d: 25
},
startArrow: {
path: G6.Arrow.vee(15, 20, 15), // Using the built-in edges for the path, parameters are the width, length, offset (0 by default, corresponds to d), respectively
d: 15
},
}Custom Arrow
Please follow the Custom Arrow in the Advanced Doc.
Configure the Arrow Style
Only built-in edges and custom edges can be configured.
Configurations
| Name | Required | Type | Description |
|---|---|---|---|
| fill | false | String | Filling color. No fill by default |
| stroke | false | String | The stroke color. Same as the edge by default |
| lineWidth | false | Number | The line width. Same as the edge by default |
| opacity | false | Number | Opacity |
| strokeOpacity | false | Number | The stroke opacity |
| shadowColor | false | String | The color of the shadow |
| shadowBlur | false | Number | The blur degree of the shadow |
| shadowOffsetX | false | Number | The x offset of the shadow |
| shadowOffsetY | false | Number | The y offset of the shadow |
| lineDash | false | Array | The style of the dash line. It 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
// Built-in Arrow
style: {
endArrow: {
path: G6.Arrow.triangle(10, 20, 25),
d: 25,
fill: '#f00',
stroke: '#0f0',
opacity: 0.5,
lineWidth: 3,
// ...
},
}
// Custom Arrow
style: {
endArrow: {
path: 'M 0,0 L 20,10 L 20,-10 Z',
d: 5,
fill: '#f00',
stroke: '#0f0',
opacity: 0.5,
lineWidth: 3,
// ...
},
}