g6/packages/site/docs/manual/customize/extensionCats.en.md

title	order
Custom Extension Overview	0

In the API documentation, you can see that G6 provides a rich set of built-in features that can meet most business requirements. When the built-in capabilities are not sufficient, G6 also offers a flexible extension mechanism, allowing you to customize various types of extensions based on your business needs.

One notable difference in the architecture of G6 5.0 compared to previous versions is its full openness. Apart from the Graph itself, all other functionalities are considered as "extensions" in G6. For example, there are built-in extensions for node types such as 'circle-node' and 'rect-node', as well as for interactions like 'drag-node' and 'zoom-canvas'. The syntax for writing these extensions remains consistent with both built-in and custom ones. Therefore, you can refer to the source code of any built-in extension for inheritance and extension purposes.

The extension categories in G6 5.0 are as follows:

• Node Type
• Edge Type
• Combo Type
• Data Transformer
• Behavior
• Layout
• Plugin
• Theme

For the mentioned extensions, G6 provides rich built-in functionalities, but most of them are not automatically registered to the Graph by default. This is done to achieve Tree Shaking during the bundling process and reduce package size. Therefore, some built-in functionalities need to be imported from Extensions and registered to the Graph using the extend method before they can be configured and used on the graph instance.

Let's take a few examples of built-in functionalities that are not registered by default: ellipse-node, diamond-node, cubic-edge, lasso-select, map-node-size.

import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';

/**
 * To extend the Graph and register the required built-in functionalities,
 * you can use the extend method. The second parameter of this method is the registry.
 * */
const Graph = extend(BaseGraph, {
  nodes: {
    'ellipse-node': Extensions.EllipseNode,
    'diamond-node': Extensions: DiamondNode,
  },
  edges: {
    'cubic-edge': Extensions.CubicEdge,
  },
  transforms: {
    'map-node-size':Extensions.MapNodeSize,
  },
  behaviors: {
    'lasso-select': Extensions.LassoSelect
  }
});

// Instantiate a class after extending
const graph = new Graph({
  // ... Other configurations
  transforms: [{ type: 'map-node-size', field: 'degree' range: [16, 60]}],
  node: model => {
    return {
      id: model.id,
      data: {
        type: model.data.value > 10 ? 'diamond-node' : 'ellipse-node',
        // ... Other configurations
      }
    }
  },
  edge: {
    type: 'cubic-edge',
  },
  modes: {
    default: ['lasso-select']
  }
});

Built-in Extensions

Here is a list of built-in extensions in G6, along with their default registration status:

1. nodes

type	Import from	Registered by Default	Demo	Note
'circle-node'	Extensions.CircleNode	✅ Yes	DEMO
'rect-node'	Extensions.RectNode	✅ Yes	Rect DEMO，Round Rect DEMO
'image-node'	Extensions.ImageNode	✅ Yes	DEMO
'donut-node'	Extensions.DonutNode	No	DEMO
'diamond-node'	Extensions.DiamondNode	No	DEMO
'hexagon-node'	Extensions.HexagonNode	No	DEMO
'star-node'	Extensions.StarNode	No	DEMO
'triangle-node'	Extensions.TriangleNode	No	DEMO
'ellipse-node'	Extensions.EllipseNode	No	DEMO
'modelRect-node'	Extensions.ModelRectNode	No	DEMO
'sphere-node'	Extensions.SphereNode	No	DEMO	availabel only when renderer: 'webgl-3d'
'cube-node'	Extensions.CubeNode	No	DEMO	availabel only when renderer: 'webgl-3d'

2. edges

type	Import from	Registered by Default	Demo	Note
'line-edge'	Extensions.LineEdge	✅ Yes	DEMO
'loop-edge'	Extensions.LineEdge	✅ Yes	DEMO
'quadratic-edge'	Extensions.QuadraticEdge	No	DEMO
'cubic-edge'	Extensions.CubicEdge	No	DEMO
'polyline-edge'	Extensions.PolylineEdge	No	DEMO
'cubic-horizontal-edge'	Extensions.CubicHorizontalEdge	No	DEMO
'cubic-vertical-edge'	Extensions.CubicVerticalEdge	No	DEMO

3. combos

type	Import from	Registered by Default	Demo	Note
'circle-combo'	Extensions.CircleCombo	✅ Yes	DEMO
'rect-combo'	Extensions.RectCombo	✅ Yes	DEMO

4. transforms

It is called after the raw data is input into the graph and is used for data processing. If there are multiple data processors, they are executed in the order specified by the configuration array.

type	Import from	Registered by Default	Demo	Note
'transform-v4-data'	Extensions.TransformV4Data	✅ Yes
'map-node-size'	Extensions.MapNodeSize	✅ Yes

5. behaviors

All built-in and custom interactions should inherit from Extensions.BaseBehavior or other existing interactions.

type	Import from	Registered by Default	Demo	Note
'drag-canvas'	Extensions.DragCanvas	✅ Yes	DEMO
'zoom-canvas'	Extensions.ZoomCanvas	✅ Yes	DEMO
'drag-node'	Extensions.DragNode	✅ Yes	DEMO
'drag-combo'	Extensions.DragCombo	✅ Yes	DEMO
'click-select'	Extensions.ClickSelect	✅ Yes	DEMO
'collapse-expand-combo'	Extensions.CollapseExpandCombo	✅ Yes	DEMO
'collapse-expand-tree'	Extensions.CollapseExpandTree	✅ Yes	DEMO
'activate-relations'	Extensions.ActivateRelations	No	DEMO
'brush-select'	Extensions.BrushSelect	No	DEMO
'lasso-select'	Extensions.LassoSelect	No	DEMO
'create-edge'	Extensions.CreateEdge	No	DEMO
'shortcuts-call'	Extensions.ShortcutsCall	No	DEMO
'scroll-canvas'	Extensions.ScrollCanvas	No	DEMO
'orbit-canvas-3d'	Extensions.OrbitCanvas3D	No	DEMO	availabel only when renderer: 'webgl-3d'
'zoom-canvas-3d'	Extensions.ZoomCanvas3D	No	DEMO	availabel only when renderer: 'webgl-3d'

5. layouts

type	Import from	Registered by Default	Demo	Note
'force'	Extensions.ForceLayout	✅ Yes	DEMO
'grid'	Extensions.GridLayout	✅ Yes	DEMO
'circular'	Extensions.CircularLayout	✅ Yes	DEMO
'concentric'	Extensions.ConcentricLayout	✅ Yes	DEMO
'random'	Extensions.RandomLayout	No
'mds'	Extensions.MDSLayout	No	DEMO
'radial'	Extensions.RadialLayout	No	DEMO
'fruchterman'	Extensions.FruchtermanLayout	No	DEMO
'd3-force'	Extensions.D3ForceLayout	No
'force-atlas-2'	Extensions.ForceAtlas2Layout	No	DEMO
'dagre'	Extensions.DagreLayout	No	DEMO
'comboCombined'	Extensions.ComboCombinedLayout	No	DEMO
'compactBox'	Extensions.compactBox	No	DEMO
'dendrogram'	Extensions.compactBox	No	DEMO
'indented'	Extensions.compactBox	No	DEMO
'mindmap'	Extensions.mindmap	No	DEMO

6. plugins

All built-in and custom plugins should inherit from Extensions.BasePlugin or other existing plugins.

type	Import from	Registered by Default	Demo	Note
'history'	Extensions.History	✅ Yes	DEMO
'toolbar'	Extensions.Toolbar	No	DEMO
'tooltip'	Extensions.Tooltip	No	DEMO
'minimap'	Extensions.Minimap	No	DEMO
'grid'	Extensions.Grid	No	DEMO
'menu'	Extensions.Menu	No	DEMO
'fisheye'	Extensions.Fisheye	No	DEMO
'legend'	Extensions.Legend	No	DEMO
'timebar'	Extensions.Timebar	No	DEMO
'hull'	Extensions.Hull	No	DEMO
'snapline'	Extensions.Snapline	No	DEMO
'watermarker'	Extensions.WaterMarker	No	DEMO	Supports images or multiple texts

Custom Extensions

The registration method for custom extensions is the same as the registration method for built-in extensions, as mentioned in the previous context.

import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';

// To create custom node types, you can inherit from an existing node type or the base node class Extensions.BaseNode.
class XXCustomNode extends Extensions.CircleNode {
  // ... To write custom node logic, please refer to the documentation for custom nodes to understand the writing format.
}

// To create a custom interaction, you can inherit from an existing interaction or the base behavior class Extensions.BaseBehavior.
class XXCustomBehavior extends Extensions.BaseBehavior {
  // ... To write custom interaction logic, please refer to the documentation for custom interactions to understand the writing format.
}
/**
 * To register the required built-in functionalities, the second parameter is the registry.
 * You can use it to register both built-in extensions and custom extensions simultaneously.
 * */
const Graph = extend(BaseGraph, {
  nodes: {
    'xx-custom-node': XXCustomNode,
  },
  behaviors: {
    'lasso-select': Extensions.LassoSelect
    'xx-custom-behavior': XXCustomBehavior
  }
  // ... Same as other extensions
});

const graph = new Graph({
  // ... Other configurations
  node: {
    type: 'xx-custom-node', // Using the key from the registry for configuration
  },
  modes: {
    default: ['drag-canvas', 'lasso-select', 'xx-custom-behavior']
  }
});

Each type of extension should inherit from the corresponding extension base class or an existing extension of the same type. Please refer to the subsequent documentation in this chapter for the writing format of each type of extension.