Loop

4 min read

A built-in edge Line has the default style as below.

⚠️Attention:
loop edge is appropriate for the self-loop edges whose target node and the source node are the same. In other words, a loop edge connect a node to itself. There will be a strange result if the loop edge is applied to the edge which is not a self-loop.

Usage

As stated in Built-in Edges , there are two ways to configure the edge: Configure it when instantiating a Graph globally; Configure it in the data.

1 Global Configure When Instantiating a Graph

Assign shape to 'cubic' in the defaultEdge object when instantiating a Graph:

const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    shape: 'loop', // The type of the edge
    // ...  Other configuraltions
  },
});

2 Configure in the Data

To configure different edges with different properties, you can write the properties into the edge data.

const data = {
  nodes: [
    ... // nodes
  ],
  edges: [{
    source: 'node0',
    target: 'node0'
    shape: 'loop',
    //... // Other configurations for edges
    style: {
      //...  // Style properties for edges
    }
  },
    //... // Other edges
  ]
}

Property

Loop edge has the Common Edge Properties, and some commonly used properties are shown below. The properties with object type will be described in detail after the table, where loopCfg is the special property for loop edge.

loop 边支持以下的配置项,对于 Object 类型的配置项将在后面有详细讲解:

Name Description Type Remark
color The color of the edge String The priority id lower than stroke in style
style The default style of edge Object Correspond to the styles in Canvas
label The text of the label String
labelCfg The configurations of the label Object
loopCfg Special property for loop edge Object

style

style is an object which is the same as the Common Edge Style Properties. The following code shows how to configure the style globally when instantiating a Graph.

const data = {
  nodes: [
    {
      id: 'node0',
      x: 100,
      y: 100,
      size: 20,
    },
  ],
  edges: [
    {
      source: 'node0',
      target: 'node0',
      shape: 'loop',
      label: 'loop',
    },
  ],
};
const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    // shape: 'loop',  // The shape has been assigned in the data, we do not have to define it any more
    style: {
      endArrow: true,
      stroke: '#088',
      lineWidth: 3,
    },
  },
});
graph.data(data);
graph.render();

labelCfg

labelCfg is an object which is the same as the Common Edge Label Properties. Base on the code in style section, we add labelCfg to defaultEdge.

const data = {
  // ... data
};
const graph = new G6.Graph({
  // ... Other configurations for graph
  defaultEdge: {
    // ... Other properties for edges
    labelCfg: {
      refY: -5,
      refX: 30,
    },
  },
});
// ...

loopCfg

loopCfg is an object that configures the direction, height, and clockwise.

  • position: The relative position to the source/target node. Options: toptop-rightright,bottom-rightbottombottom-leftlefttop-left. top by default.
  • dist: The distance between the keyShape of the source/target node to the highest position of the loop. It is equal to the height of the source/target node by default.
  • clockwise: Whether to draw the loop clockwisely. true by default

Base on the code in style section, we add loopCfg to defaultEdge.

const data = {
  // ... data
};
const graph = new G6.Graph({
  // ... Other configurations for graph
  defaultEdge: {
    // ... Other properties for edges
    loopCfg: {
      position: 'left',
      dist: 100,
      clockwise: false,
    },
  },
});
// ...