Outline

3 min read

Built-in Layout Overview

G6 provides several built-in layout algorithms as listed below. They can be configured to layout when instantiate the Graph, or be instantiated independently. If the built-in layouts cannot meet your requirement, you can also custom a layout.

Notice that the layouts for Graph cannot be used on TreeGraph.

Configure to Gaph

Configure the layout when instantiating a Graph:

const graph = new G6.Graph({
  ...                      // Other configurations
  layout: {                // Object, configuration for layout. random by default
    type: 'force',
    preventOverlap: true,
    nodeSize: 30,
    // workerEnabled: true, // Whether enable webworker
    // gpuEnabled: true // Whether enable GPU version. supported by G6 4.0, and only support gForce and fruchterman layout. If the machine or browser does not support GPU computing, it will be degraded to CPU computing automatically. 
    ...                    // Other layout configurations
  }
});

The configurations of each layout algorithms are different. Please refer to corresponding API of each layout in this directory.
When layout is not assigned on graph:

  • If there are x and y in node data, the graph will render with these information;
  • If there is no positions information in node data, the graph will arrange nodes with Random Layout by default.

Instantiate Independently

The functions in this section should be concerned in these two situation:

  • When you want to applay a layout algorithm to your data but not for Graph, you can instantiate the layout independently by calling const layout = new G6.Layout['layoutName'].
  • When you want to custom a new type of layout by G6.registerLayout, some functions you should override.

Initialize

init(data)

Initialize the layout.

Paramter

NameTypeRequiredDescription
dataObjecttrueThe data for the layout

getDefaultCfg()

Get the default configurations of the layout.

Return

NameTypeRequiredDescription
cfgObjecttrueThe default configurations

Layout

execute()

Execute the layout.

layout(data)

Execute layout according to the data.

Paramter

NameTypeRequiredDescription
dataObjecttrueThe data to be arranged

Update

updateCfg(cfg)

Update the configurations for layout.

Paramter

NameTypeRequiredDescription
cfgObjecttrueNew configurations

Destroy

destroy()

Destroy the layout.

AI Layout Prediction

Background

In an application of graph visualization, how to choose a suitable layout so that the data queried every time can be clearly displayed is a big challenge. Although we can allow user to switch the layout and their configuration like Gephi, but it is obviousely inefficient. And the users might not able to choose a perfect layout. In order to completely solve the problem, G6 provides intelligent layout prediction capabilities. The prediction engine will recommend the most suitable layout based on the data.

Definition

Intelligent layout refers to modeling in combination with neural networks and training output prediction models through a large amount of labeled data (label layout classification). In business scenarios, the real graph data is predicted through the model, so as to recommend the most suitable data layout classification method.

Prediction Engine

@antv/vis-predict-engine is positioned as a prediction engine for visualization, which is mainly used for classification prediction of graph layout in the short term. Generally speaking, the prediction engine will support layout configuration parameter prediction, node category prediction, chart category prediction, etc.

The overall process of G6 map layout prediction is shown in the following figure:

Usage

The AntV team encapsulated the ability of graph layout prediction into the NPM package @antv/vis-predict-engine, and used the predict method to predict the layout of the provided data. The basic usage is as follows:

import G6 from '@antv/g6'
import { GraphLayoutPredict } from '@antv/vis-predict-engine'
const data = {
    nodes: [],
  edges: []
}
// predictLayout indicates the predicted layout type, such as 'force' or 'radial'
// 'confidence' is the confidence of the prediction
const { predictLayout, confidence } = await GraphLayoutPredict.predict(data);
const graph = new G6.Graph({
    ... // other configurations
    layout: {
    type: predictLayout
  }
})

Result

As shown in the figure below, in a medical and health map, the layout effect of "force" obtained by the intelligent layout prediction engine is the best, and the comparison experiment also meets expectations.

Demo

AI Layout Prediction DEMO