logoCreated with Sketch.

G6

G6.Graph(cfg)

6 min read

Graph is the carrier of G6. All the operations about events, behaviors, items are mounted on the instance of Graph.

new Graph(cfg: GraphOptions) => Graph
const graph = new G6.Graph({
  container: '',
  width: 500,
  height: 500,
  modes: {
    default: ['drag-canvas'],
  },
  layout: {
    type: 'radial',
    unitRadius: 50,
    center: [500, 300],
  },
});

GraphOptions.container

string | HTMLElement required

The DOM container of graph, it can be the id of a DOM element or the an HTML node.

GraphOptions.width

Number optional

The width of the canvas for graph with the unit 'px'.

GraphOptions.height

Number optional

The height of the canvas for graph with the unit 'px'.

GraphOptions.fitView

Boolean optional default: false

Whether to fit the canvas to the view port.

GraphOptions.fitViewPadding

Array | Number optional default: 0

Takes effect only when fitView: true. It is the padding between canvas and the border of view port.
- It can be a value, e.g. fitViewPadding: 20, which means the padding to the top, left, right, bottom are the same.
- Or an array, e.g. fitViewPadding: [ 20, 40, 50, 20 ], the four values in the array indicate the padding to the top, right, bottom, left respectively.

GraphOptions.fitCenter

Boolean optional default: false

Supported by v3.5.1. Whether to translate the graph to align its center with the canvas. Its priority is lower than fitView.

GraphOptions.linkCenter

Boolean optional default: false

Whether to connect the edges to nodes' center.

GraphOptions.groupByTypes

Boolean optional default: true

Whether to group the nodes and edges separately. When it is false, all the items (including nodes and edges) are in the same group, and the order/zindex of them are determined according to the order of their generation. When you are using Combo, MUST set groupByTypes to false.

GraphOptions.autoPaint

Boolean optional default: true

Whether to paint the graph automatically while item updated or view port changed. In order to enhance the performance, we recommend to turn off antoPaint when you are doing bulk operation on nodes or edges. This can be refered to setAutoPaint().

GraphOptions.modes

Object optional default: {}

The interaction modes of this graph. Please refer to Interaction Mode for detail.

GraphOptions.modes.default

Object optional default: []

The default modes of this graph. Please refer to Default Behavior for detail.

GraphOptions.nodeStateStyles

Object optional default: {}

The node styles on different states, e.g. hover, selected. It is a new feature of G6 3.1.

⚠️ Note: If you are using version 3.1 or below, just change nodeStyle to nodeStateStyles and edgeStyle to edgeStateStyles and keep the configuration unchanged.

GraphOptions.edgeStateStyles

Object optional default: {}

The edge styles on different states, e.g. hover, selected. It is a new feature of G6 3.1.

GraphOptions.comboStateStyles

Object optional default: {}

The combo styles on different states, e.g. hover, selected. It is a new feature of G6 3.5.

GraphOptions.defaultNode

Object optional default: {}

Default node configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data.

GraphOptions.defaultEdge

Object optional default: {}

Default edge configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data.

GraphOptions.defaultCombo

Object optional default: {}

Default combo configurations in global, including type, size, color and so on. Its priority is lower than the configurations in data. It is a new feature of G6 3.5.

GraphOptions.plugins

Array _ optional _default: []

Plugins for graph. Please refer to Plugin for detail.

GraphOptions.animate

Boolean _ optional _default: false

Wheter activate the global animation. Which will take effect while changing layouts, changing data, and other global operations.

GraphOptions.animateCfg

Object optional default: {}

The configurations for global animation. Takes effect only when animate: true. For more detail about animateCfg, see Basic Animation Docs.

GraphOptions.animateCfg.onFrame

Function optional default: null

The callback function for every frame of animation. The path of custom animation for node can be defined here. The nodes will move linearly when onFrame is null.

GraphOptions.animateCfg.duration

Number optional default: 500

Duration of animation with unit millisecond.

GraphOptions.animateCfg.easing

string optional default: easeLinear

The easing function name of animation. Please refer to ease in d3.

GraphOptions.minZoom

Number optional default: 0.2

The minimum zoom ratio.

GraphOptions.maxZoom

Number optional default: 10

The maximum zoom ratio.

GraphOptions.layout

Object optional default: {}

Configurations for layout. The type in it is the name of layout method with the options: 'random', 'radial', 'mds', 'circular', 'fruchterman', 'force', 'dagre', 'concentric', 'grid'. 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.

For more configurations for different layout methods, please refer to Layout API.

GraphOptions.layout.pipes

Sublayout Pipeline Supports by v4.3.0 and latter versions

Sublayout pipeline supports several sublayouts on different subgraphs by configuring GraphOptions.layout.

img

You can configure layout.pipes array when initializing the graph instance. Each item in the array is a sublayout pipe, and it contains the infomation about the layout type(type), configurations for this layout type, and node filtering function (nodesFilter). NOTICE that, if some nodes belong to several sublayouts in the same time, the result positions of these nodes will follow the last sublayout.

The format of the layout.pipes:

type Pipes =
  {
    // the name of the layout method for this subgraph
    type: 'random' | 'radial' | 'mds' | 'circular' | 'fruchterman' | 'force' | 'gForce' | 'dagre' | 'concentric' | 'grid' | 'forceAtlas2',
    // node filtering function, the parameter is the node data, and it returns a boolean to indicate if the node belongs to this subgraph
    nodesFilter: (node: NodeData) => boolean;
    ... // the configurations for this layout method, refer to the docs for different layout method pls
  }[];

Usage demo:

// configure the layout.pipes when initializing the graph instance
const graph = new G6.Graph({
  // ...       // other graph configurations
  layout: {
    pipes: [
      {
        // the name of the layout method for this subgraph
        type: 'circular',
        // indicate if the node belongs to the subgraph
        nodesFilter: (node) => node.subGraphId === '1',
        // ... other configurations for this layout method
      },
      {
        type: 'grid',
        nodesFilter: (node) => node.subGraphId === '2',
        // other configurations for this layout method
        begin: [100, 0],
      }
    ]
  },
});

GraphOptions.renderer

'canvas' / 'svg' _ optional _default: 'canvas'

Render the graph with Canvas or SVG. It is supported expecting V3.3.x.

GraphOptions.enabledStack

boolean optional default: false

Whether to enable stack，that is, whether to support redo & undo operation. Support by V3.6 and latter versions.

GraphOptions.maxStep

number optional default: 10

The max step number of redo & undo, works only when the enabledStack is true. Support by V3.6 and latter versions.