Overview of Edges

11 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.

img

Types of Default Nodes

The table below shows the built-in edges and their special properties:

NameDescription
lineA straight line connected two end nodes:
- controlPoints does not take effect
- Refer to properties of line for more information
img
polylineA 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
img
arcAn 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
img
quadraticA 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
img
cubicA 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
img
cubic-verticalThe vertical cubic bezier curve. The user can not assign the control point for this type of edgeimg
cubic-horizontalThe horizontal cubic bezier curve. The user can not assign the control point for this type of edge
loopSelf-loop edge. Refer to properties of loop for more informatioimg

The Common Property

NameRequiredTypeRemark
idtrueStringThe id of the edge, MUST be a unique string
sourcetrueStringNumberThe id of the source node
targettrueStringThe id of the target node
typefalseStringThe type of the edge. It can be the type of a Built-in Edge, or a custom Edge. 'line' by default
sourceAnchorfalseNumberThe index of link points on the source node. The link point is the intersection of the edge and related node
targetAnchorfalseNumberThe index of link points on the target node. The link point is the intersection of the edge and related node
stylefalseObjectThe edge style
labelfalseStringThe label text of the edge
labelCfgfalseObjectThe 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:

NameRequiredTypeRemark
strokefalseStringThe stroke color
lineWidthfalseNumberThe line width
lineAppendWidthfalseNumberThe 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
endArrowfalseBoolean / ObjectThe 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
}
startArrowfalseBoolean / ObjectThe 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
}
strokeOpacityfalseNumberThe stroke opacity
shadowColorfalseStringThe color of the shadow
shadowBlurfalseNumberThe blur degree of the shadow
shadowOffsetXfalseNumberThe x offset of the shadow
shadowOffsetYfalseNumberThe y offset of the shadow
lineDashfalseArrayThe 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]
cursorfalseStringThe 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:

NameRequiredTypeRemark
refXfalseNumberx offset of the label
refYfalseNumbery offset of the label
positionfalseStringThe relative position to the edge. Options: 'start', 'middle', and 'end'. 'middle' by default
autoRotatefalseBooleanWhether to activate ratating according to the edge automatically. false by default
stylefalseObjectThe style property of the label

The commonly used configurations for the style in the above table are:

NameRequiredTypeRemark
fillfalseStringThe color of the label
strokefalseStringThe stroke color
lineWidthfalseNumberThe line width of the stroke
opacityfalseNumberThe opacity
fontSizefalseNumberThe font size
fontFamilyfalseStringThe 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:
img

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
    }
  }
}
img
  • State —— Change the styles during the interaction process.