logoCreated with Sketch.

G6

Plugins

4 min read

There are several plugins in G6 which can be used inside and ouside G6 freely.

Configure to Graph

In G6, Minimap is a plugin, which is packed as independent package. Here, we import Grid and Minimap for example:

<body>
  <!-- Import Grid by CDN -->
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/grid.js"></script>
  <!-- Import Minimap by CDN -->
  <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/minimap.js"></script>
</body>

You only need to instantiate it and configure the minimap onto the instance of Graph:

// Instantialize the Grid plugin
const grid = new Grid();
// Instantialize the Minimap plugin
const minimap = new Minimap();
const graph = new G6.Graph({
  //... Other configurations
  plugins: [grid, minimap], // Configure Grid and Minimap to the graph
});

Grid

Grid draw grids on the canvas.

Grid has no configurations. Just use the code in Configure to Graph to use it.

Minimap

Minimap is a tool for quick preview and exploration on large graph.

It can be configured to adjust the styles and functions.

Configuration

Name Type Description
container Object The DOM container of Minimap. The plugin will generate a new one if container is not defined
className String The className of the DOM element of the Minimap
viewportClassName String The className of the DOM element of the view port on the Minimap
type String Render type. Options: 'default': Render all the graphics shapes on the graph; 'keyShape': Only render the keyShape of the items on the graph to reach better performance; 'delegate': Only render the delegate of the items on the graph to reach better performance. Performance: 'default' < 'keyShape' < 'delegate'. 'default' by default
size Array The size of the Minimap
delegateStyle Object Takes effect when type is 'delegate'. The style of the delegate of the items on the graph

The delegateStyle has the properties:

Name Type Description
fill String Filling color
stroke String Stroke color
lineWidth Number The width of the stroke
opacity Number Opacity
fillOpacity Number Filling opacity

Edge Bundling

In complex graph with large number of edges, edge bundling can help you to improve the visual clutter.

Edge bundling on American airline graph. Demo Link. Demo Document.

The edge bundling plugin can be configured to adjust the styles and functions.

Configuration

Name Type Default Description
K Number 0.1 The strength of the bundling
lambda Number 0.1 The initial step length
divisions Number 1 The initial number of division on each edge. It will be multipled by divRate in each cycle
divRate Number 2 The rate of the divisions increasement. Large number means smoother result, but the performance will be worse when the number is too large
cycles Number 6 The number of outer interations
iterations Number 90 The initial number of inner interations. It will be multiplied by iterRate in each cycle
iterRate Number 0.6666667 The rate of the iterations decreasement
bundleThreshold Number 0.6 The edge similarity threshold for bundling. Large number means the edges in one bundle have smaller similarity, in other words, more edges in one bundle