Overview of Edges
There are 9 built-in edges in G6:
- line: straight line without control points;
- polyline: polyline with one or more control points;
- arc;
- quadratic: quadratic bezier curve;
- cubic: cubic bezier curve;
- cubic-vertical：vertical cubic bezier curve. The user can not assign the control point for this type of edge;
- cubic-horizontal: horizontal cubic bezier curve. The user can not assign the control point for this type of edge;
- loop: self-loop edge.
Types of Default Nodes
The table below shows the built-in edges and their special properties:
| Name | Description | |
|---|---|---|
| line | A straight line connected two end nodes: - controlPoints does not take effect- Refer to properties of line for more information |  |
| polyline | A polyline with one or more control points: - controlPoints is the set of all the control points of polyline. If it is not assigned, G6 will calculate it by A* algorithm- Refer to properties of polyline for more information |  |
| arc | An arc connects two end nodes: - controlPoints does not take effects- control the bending and direction by curveOffset- Refer to properties of arc for more informatio |  |
| quadratic | A quadratic bezier curve with one control point: - The curve will be bended on the center if the controlPoints is not defined - Refer to properties of quadratic for more informatio |  |
| cubic | A cubic bezier curve with two control points: - The curve will be bended on the position of 1/3 and 2/3 if the controlPoints is not defined- Refer to properties of cubic for more informatio |  |
| cubic-vertical | The vertical cubic bezier curve. The user can not assign the control point for this type of edge |  |
| cubic-horizontal | The horizontal cubic bezier curve. The user can not assign the control point for this type of edge |  |
| loop | Self-loop edge. Refer to properties of loop for more informatio |  |
The Common Property
| Name | Required | Type | Remark | |
|---|---|---|---|---|
| id | false | String | The id of the edge, MUST be a unique string | |
| source | true | String | Number | The id of the source node |
| target | true | String | The id of the target node | |
| type | false | String | The type of the edge. It can be the type of a Built-in Edge, or a custom Edge. 'line' by default | |
| sourceAnchor | false | Number | The index of link points on the source node. The link point is the intersection of the edge and related node | |
| targetAnchor | false | Number | The index of link points on the target node. The link point is the intersection of the edge and related node | |
| style | false | Object | The edge style | |
| label | false | String | The label text of the edge | |
| labelCfg | false | Object | The configurations of the label |
style
style is an object to configure the stroke color, shadow, and so on. Here is the commonly used properties in style:
| Name | Required | Type | Remark |
|---|---|---|---|
| stroke | false | String | The stroke color |
| lineWidth | false | Number | The line width |
| lineAppendWidth | false | Number | The width of the response area for interaction. In other words, when the edge is too thin to be hitted by mouse, enlarge the value of lineWidth to widen the response area |
| endArrow | false | Boolean / Object | The arrow on the end of the edge. When startArrow is true, show a default arrow on the end of the edge. User can customize an arrow by path, e.g.:endArrow: { path: 'M 0,0 L 20,10 L 20,-10 Z', // Customize the path for the arrow d: -2 // offset } |
| startArrow | false | Boolean / Object | The arrow on the start of the edge. When startArrow is true, show a default arrow on the start of the edge. User can customize an arrow by path, e.g.:endArrow: { path: 'M 0,0 L 20,10 L 20,-10 Z', // Customize the path for the arrow d: -2 // offset } |
| 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] |
| cursor | false | String | The type of the mouse when hovering the edge. The options are the same as cursor in CSS |
Configure style globally when instantiating the Graph:
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultEdge: {
// ... Other properties for edges
style: {
stroke: '#eaff8f',
lineWidth: 5,
// ... Other style properties
},
},
});label and labelCfg
label is a string which indicates the content of the label. labelCfg is an object to configure the label. The commonly used configurations of labelCfg:
| Name | Required | Type | Remark |
|---|---|---|---|
| refX | false | Number | x offset of the label |
| refY | false | Number | y offset of the label |
| position | false | String | The relative position to the edge. Options: 'start', 'middle', and 'end'. 'middle' by default |
| autoRotate | false | Boolean | Whether to activate ratating according to the edge automatically. false by default |
| style | false | Object | The style property of the label |
The commonly used configurations for the style in the above table are:
| Name | Required | Type | Remark |
|---|---|---|---|
| fill | false | String | The color of the label |
| stroke | false | String | The stroke color |
| lineWidth | false | Number | The line width of the stroke |
| opacity | false | Number | The opacity |
| fontSize | false | Number | The font size |
| fontFamily | false | String | The font family |
| ... The label styles of node and edge are the same, summarized in Text Shape API |
The following code shows how to configure label and labelCfg globally when instantiating a Graph:
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultEdge: {
// ... Other properties for nodes
label: 'edge-label',
labelCfg: {
refY: -10,
refX: 60,
},
},
});Configure Edges
There are three methods to configure edges: Configure edges globally when instantiating a Graph; Configure edges in their data; Configure edges by graph.edge(edgeFn). Their priorities are:
graph.edge(edgeFn) > Configure in data > Configure globally
That means, if there are same configurations in different ways, the way with higher priority will take effect.
⚠️ Attention: Expect for
id, source, target, label which should be assigned to every single edge data, the other configurations in The Common Property and in each edge type (refer to doc of each edge type) support to be assigned by the three ways.Configure Globally When Instantiating Graph
Assign defaultEdge to configure all the nodes globally:
const graph = new G6.Graph({
container: 'mountNode',
width: 800,
height: 600,
defaultEdge: {
type: 'line',
// Other properties for all the nodes
},
});Configure in Data
To configure different nodes with different properties, you can write the properties into their data individually:
const data = {
nodes: [
... // nodes
],
edges: [{
source: 'node0',
target: 'node1'
type: 'polyline',
// ... // Other properties for this edge
style: {
// ... // Style properties for this edge
}
},{
source: 'node1',
target: 'node2'
type: 'cubic',
// ... // Other properties for this edge
style: {
// ... // Style properties for this edge
}
},
// ... // edges
]
}Configure with graph.edge(edgeFn)
By this way, we can configure different nodes with different properties.
⚠️Attention:
graph.edge(edgeFn)must be called before calling render(). It does not take effect otherwise;- It has the highest priority that will override the same properties configured by other ways;
- Each edge will be updated when adding or updating items. It will cost a lot when the amount of the data is large.
// const data = ...
// const graph = ...
graph.edge((edge) => {
return {
id: edge.id,
type: 'polyline',
style: {
fill: 'steelblue',
},
};
});
graph.data(data);
graph.render();Example
const data = {
nodes: [
{ id: '1', x: 50, y: 50, size: 20 },
{ id: '2', x: 150, y: 50, size: 20 },
{ id: '3', x: 200, y: 50, size: 20 },
{ id: '4', x: 300, y: 130, size: 20 },
{ id: '5', x: 350, y: 50, size: 20 },
{ id: '6', x: 450, y: 50, size: 20 },
{ id: '7', x: 500, y: 50, size: 20 },
{ id: '8', x: 600, y: 50, size: 20 },
{ id: '9', x: 650, y: 50, size: 20 },
{ id: '10', x: 750, y: 50, size: 20 },
{ id: '11', x: 800, y: 50, size: 20 },
{ id: '12', x: 900, y: 150, size: 20 },
{ id: '13', x: 950, y: 50, size: 20 },
{ id: '14', x: 1050, y: 150, size: 20 },
{ id: '15', x: 1100, y: 50, size: 20 },
],
edges: [
{ source: '1', target: '2', type: 'line', label: 'line' },
{ source: '3', target: '4', type: 'polyline', label: 'polyline' },
{ source: '5', target: '6', type: 'arc', label: 'arc' },
{ source: '7', target: '8', type: 'quadratic', label: 'quadratic' },
{ source: '9', target: '10', type: 'cubic', label: 'cubic' },
{ source: '11', target: '12', type: 'cubic-vertical', label: 'cubic-vertical' },
{ source: '13', target: '14', type: 'cubic-horizontal', label: 'cubic-horizontal' },
{ source: '15', target: '15', type: 'loop', label: 'loop' },
],
};
const graph = new G6.Graph({
container: 'mountNode',
width: 1500,
height: 300,
linkCenter: true, // edges connect the nodes' center
});
graph.data(data);
graph.render();The result:
Adjust the Properties
By writing the properties into the data, we adjust the style and the label of the edges of '9-10' and '11-12'.
// Move the label of this edge
{
source: '9',
target: '10',
type: 'cubic',
label: 'cubic',
labelCfg: {
refY: -15 // refY is the offset along the clockwise down direction
}
},
// Set the color, line dash, line width, and style of the label of this edge
{
source: '11',
target: '12',
type: 'cubic-vertical',
color: '#722ed1', // Color
size: 5, // Line width
style: {
lineDash: [2, 2] // Dash line
},
label: 'cubic-vertical',
labelCfg: {
position: 'center', // The position of the label=
autoRotate: true, // Whether to rotate the label according to the edge
style: {
stroke: 'white', // White stroke for the label
lineWidth: 5, // The line width of the stroke
fill: '#722ed1', // The color of the text
}
}
}
Related Reading
- State —— Change the styles during the interaction process.