logoCreated with Sketch.

G6

Built-in Edges

10 min read

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 node
source true String Number
target true String The id of the target node
shape false String The shape of the node, '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 10,0 L -10,-10 L -10,10 Z', // Customize the path for the arrow
d: 10 // 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 10,0 L -10,-10 L -10,10 Z', // Customize the path for the arrow
d: 10 // 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
shadowOffsetX 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]

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
font false String The font
fontSize false Number The font size
... 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.

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: {
    shape: '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'
    shape: 'polyline',
    // ...    // Other properties for this edge
    style: {
      // ...  // Style properties for this edge
    }
  },{
    source: 'node1',
    target: 'node2'
    shape: '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 rewrite 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,
    shape: 'polyline',
    style: {
      fill: 'steelblue',
    },
  };
});

graph.data(data); graph.render();

## Example
```javascript
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', shape: 'line', label: 'line'},
    {source: '3', target: '4', shape: 'polyline', label: 'polyline'},
    {source: '5', target: '6', shape: 'arc', label: 'arc'},
    {source: '7', target: '8', shape: 'quadratic', label: 'quadratic'},
    {source: '9', target: '10', shape: 'cubic', label: 'cubic'},
    {source: '11', target: '12', shape: 'cubic-vertical', label: 'cubic-vertical'},
    {source: '13', target: '14', shape: 'cubic-horizontal', label: 'cubic-horizontal'},
    {source: '15', target: '15', shape: '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', 
  shape: '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',
  shape: '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
    }
  }
}
  • State —— Change the styles during the interaction process.