@antv/g6

@antv/g6

Version 5.0.45
Published 29 days ago
7.15 MB
11 dependencies
MIT license

Install

npm i @antv/g6

yarn add @antv/g6

pnpm add @antv/g6

Overview

A Graph Visualization Framework in JavaScript

Index

Variables

variable iconfont

const iconfont: { css: string; js: string };

variable version

const version: string;

Functions

function effect

effect: <T extends false | Record<string, any>>(
    target: Element,
    key: string,
    style: T
) => boolean;

判定给定样式是否与上一次的样式相同
Determine whether the given style are the same as the previous ones
Parameter target
目标元素 | Target element
Parameter key
缓存 key | Cache key
Parameter style
样式属性 | Style attribute
Returns
是否执行函数 | Whether to execute the function
Deprecated
该方法已废弃，并不能显著提升性能 | This method is deprecated and does not significantly improve performance

function idOf

idOf: (data: Partial<NodeData | EdgeData | ComboData>) => ID;

获取节点/边/Combo 的 ID
get the id of node/edge/combo
Parameter data
节点/边/Combo 的数据 | data of node/edge/combo
Returns
节点/边/Combo 的 ID | ID of node/edge/combo

function invokeLayoutMethod

invokeLayoutMethod: (
    layout: BaseLayout,
    method: string,
    ...args: unknown[]
) => any;

调用布局成员方法
Call layout member methods
Parameter layout
布局实例 | Layout instance
Parameter method
方法名 | Method name
Parameter args
参数 | Arguments
Returns
返回值 | Return value
Remarks
提供一种通用的调用方式来调用 G6 布局和 @antv/layout 布局上的方法
Provide a common way to call methods on G6 layout and @antv/layout layout

function isCollapsed

isCollapsed: (nodeLike: NodeLikeData) => boolean;

判断节点/组合是否收起
Determine whether the node/combo is collapsed
Parameter nodeLike
节点/组合数据 | Node/Combo data
Returns
是否收起 | Whether it is collapsed

function omitStyleProps

omitStyleProps: <T extends Record<string, any>>(
    style: Record<string, any>,
    prefix: string | string[]
) => T;

从样式中排除子样式
Omit sub style from style
Parameter style
样式 | style
Parameter prefix
子样式前缀 | sub style prefix
Returns
排除子样式后的样式 | style without sub style

function parseSize

parseSize: (size?: Size) => STDSize;

解析尺寸配置
Parse size configuration
Parameter size
尺寸配置 | size configuration
Returns
标准尺寸格式 | standard size format

function positionOf

positionOf: (datum: NodeLikeData) => Point;

获取节点/ combo 的位置坐标
Get the position of node/combo
Parameter datum
节点/ combo 的数据 | data of node/combo
Returns
- 坐标 | position

function register

register: <T extends ExtensionCategory>(
    category: Loosen<T>,
    type: string,
    Ctor: ExtensionRegistry[T][string],
    override?: boolean
) => void;

注册一个新的扩展。
Registers a new extension.
Parameter category
扩展要注册的分类，目前支持注册的扩展分类有：ExtensionCategory
The category under which the extension is to be registered, see ExtensionCategory
Parameter type
要注册的扩展的类型，将作为使用扩展时的标识
Extension type that used as an identifier when mounting the extension on a graph
Parameter Ctor
要注册的扩展类，在使用时创建实例
The extension class to be registered. An instance will be created upon use
Parameter override
是否覆盖已注册的扩展
Whether to override the registered extension
Remarks
内置扩展在项目导入时会自动注册。对于非内置扩展，可以通过 register 方法手动注册。扩展只需要注册一次，即可在项目的任何位置使用。
Built-in extensions are automatically registered when the project is imported. For non-built-in extensions, you can manually register them using the register method. Extensions only need to be registered once and can be used anywhere in the project.
Example 1
import { register, BaseNode } from '@antv/g6'; class CircleNode extends BaseNode {} register('node', 'circle-node', CircleNode);
Modifiers
- @public

function setVisibility

setVisibility: (
    shape: DisplayObject,
    value: BaseStyleProps,
    filter?: (shape: DisplayObject) => boolean
) => void;

设置图形实例的可见性
Set the visibility of the shape instance
Parameter shape
图形实例 | shape instance
Parameter value
可见性 | visibility
Parameter filter
筛选出需要设置可见性的图形 | Filter out the shapes that need to set visibility
Remarks
在设置 enableCSSParsing 为 false 的情况下，复合图形无法继承父属性，因此需要对所有子图形应用相同的可见性
After setting enableCSSParsing to false, the compound shape cannot inherit the parent attribute, so the same visibility needs to be applied to all child shapes

function subStyleProps

subStyleProps: <T extends Record<string, any>>(
    style: object,
    prefix: string
) => T;

从样式中提取子样式
Extract sub style from style
Parameter style
样式 | style
Parameter prefix
子样式前缀 | sub style prefix
Returns
子样式 | sub style

function treeToGraphData

treeToGraphData: (treeData: TreeData, getter?: TreeDataGetter) => GraphData;

将树数据转换为图数据
Convert tree data to graph data
Parameter treeData
树数据 | Tree data
Parameter getter
获取节点和边的方法 | Methods to get nodes and edges
Returns
图数据 | Graph data

Classes

class AutoAdaptLabel

class AutoAdaptLabel extends BaseBehavior<AutoAdaptLabelOptions> {}

标签自适应显示
Auto Adapt Label
Remarks
标签自适应显示是一种动态标签管理策略，旨在根据当前可视范围的空间分配、节点重要性等因素，智能调整哪些标签应显示或隐藏。通过对可视区域的实时分析，确保用户在不同的交互场景下获得最相关最清晰的信息展示，同时避免视觉过载和信息冗余。
<en/ >Label Adaptive Display is a dynamic label management strategy designed to intelligently adjust which labels should be shown or hidden based on factors such as the spatial allocation of the current viewport and node importance. By analyzing the visible area in real-time, it ensures that users receive the most relevant and clear information display in various interactive scenarios, while avoiding visual overload and information redundancy.

constructor

constructor(context: RuntimeContext, options: AutoAdaptLabelOptions);

property defaultOptions

static defaultOptions: Partial<AutoAdaptLabelOptions>;

property onToggleVisibility

protected onToggleVisibility: (event: IEvent) => void;

property onTransform

protected onTransform: () => void;

property sortLabelElementsInView

protected sortLabelElementsInView: (labelElements: Element[]) => Element[];

method destroy

destroy: () => void;

method update

update: (options: Partial<AutoAdaptLabelOptions>) => void;

class Background

class Background extends BasePlugin<BackgroundOptions> {}

背景图
Background image
Remarks
支持为图画布设置一个背景图片，让画布更有层次感、叙事性。
Support setting a background image for the canvas to make the canvas more hierarchical and narrative.

constructor

constructor(context: RuntimeContext, options: BackgroundOptions);

property defaultOptions

static defaultOptions: Partial<BackgroundOptions>;

class Badge

class Badge extends BaseShape<BadgeStyleProps> {}

徽标
Badge
Remarks
徽标是一种特殊的标签，通常用于展示数量或状态信息。
Badge is a special label, usually used to display quantity or status information.

constructor

constructor(options: DisplayObjectConfig<BadgeStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<BadgeStyleProps>;

method getBadgeStyle

protected getBadgeStyle: (
    attributes: Required<BadgeStyleProps>
) => Omit<
    Required<BadgeStyleProps>,
    | 'x'
    | 'y'
    | 'z'
    | 'class'
    | 'transform'
    | 'transformOrigin'
    | 'visibility'
    | 'zIndex'
    | 'className'
>;

method getGeometryBounds

getGeometryBounds: () => any;

method render

render: (attributes?: Required<BadgeStyleProps>, container?: Group) => void;

class BaseBehavior

abstract class BaseBehavior<
    T extends BaseBehaviorOptions = BaseBehaviorOptions
> extends BaseExtension<T> {}

交互的基类
Base class for behaviors

class BaseCombo

abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStyleProps>
    extends BaseNode<S>
    implements Combo {}

组合元素的基类
Base class of combo
Remarks
自定义组合时，推荐使用这个类作为基类。这样，用户只需要专注于实现 keyShape 的绘制逻辑
When customizing a combo, it is recommended to use this class as the base class. In this way, users only need to focus on the logic of drawing keyShape

constructor

constructor(options: DisplayObjectConfig<BaseComboStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<BaseComboStyleProps>;

property type

type: string;

method animate

animate: (
    keyframes: Keyframe[],
    options?: number | KeyframeAnimationOptions
) => import('@antv/g').IAnimation | null;

method drawCollapsedMarkerShape

protected drawCollapsedMarkerShape: (
    attributes: Required<S>,
    container: Group
) => void;

method drawKeyShape

protected abstract drawKeyShape: (
    attributes: Required<S>,
    container: Group
) => DisplayObject | undefined;

Draw the key shape of combo

method getCollapsedKeySize

protected getCollapsedKeySize: (attributes: Required<S>) => STDSize;

method getCollapsedMarkerStyle

protected getCollapsedMarkerStyle: (
    attributes: Required<S>
) => IconStyleProps | false;

method getCollapsedMarkerText

protected getCollapsedMarkerText: (
    type: CollapsedMarkerStyleProps['type'],
    attributes: Required<S>
) => string;

method getComboPosition

getComboPosition: (attributes: Required<S>) => Point;

method getComboStyle

protected getComboStyle: (attributes: Required<S>) => {
    x: number;
    y: number;
    transform: (string | number)[][];
};

method getContentBBox

protected getContentBBox: (attributes: Required<S>) => AABB;

method getEmptyKeySize

protected getEmptyKeySize: (attributes: Required<S>) => STDSize;

method getExpandedKeySize

protected getExpandedKeySize: (attributes: Required<S>) => STDSize;

method getKeySize

protected getKeySize: (attributes: Required<S>) => STDSize;

method onframe

protected onframe: () => void;

method render

render: (attributes: Required<S>, container?: Group) => void;

method update

update: (attr?: Partial<S>) => void;

method updateComboPosition

protected updateComboPosition: (attributes: Required<S>) => void;

class BaseEdge

abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> implements Edge {}

边元素基类
Base class of the edge

constructor

constructor(options: DisplayObjectConfig<BaseEdgeStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<BaseEdgeStyleProps>;

property sourceNode

readonly sourceNode: Node;

property targetNode

readonly targetNode: Node;

property type

type: string;

method animate

animate: (
    keyframes: Keyframe[],
    options?: number | KeyframeAnimationOptions
) => import('@antv/g').IAnimation | null;

method drawArrow

protected drawArrow: (
    attributes: ParsedBaseEdgeStyleProps,
    type: 'start' | 'end'
) => void;

method drawBadgeShape

protected drawBadgeShape: (
    attributes: ParsedBaseEdgeStyleProps,
    container: Group
) => void;

method drawHaloShape

protected drawHaloShape: (
    attributes: ParsedBaseEdgeStyleProps,
    container: Group
) => void;

method drawKeyShape

protected drawKeyShape: (
    attributes: ParsedBaseEdgeStyleProps,
    container: Group
) => Path | undefined;

method drawLabelShape

protected drawLabelShape: (
    attributes: ParsedBaseEdgeStyleProps,
    container: Group
) => void;

method drawSourceArrow

protected drawSourceArrow: (attributes: ParsedBaseEdgeStyleProps) => void;

method drawTargetArrow

protected drawTargetArrow: (attributes: ParsedBaseEdgeStyleProps) => void;

method getBadgeStyle

protected getBadgeStyle: (
    attributes: ParsedBaseEdgeStyleProps
) => false | BadgeStyleProps;

method getEndpoints

protected getEndpoints: (
    attributes: ParsedBaseEdgeStyleProps,
    optimize?: boolean,
    controlPoints?: Point[] | (() => Point[])
) => [Point, Point];

method getHaloStyle

protected getHaloStyle: (
    attributes: ParsedBaseEdgeStyleProps
) => false | PathStyleProps;

method getKeyPath

protected abstract getKeyPath: (
    attributes: ParsedBaseEdgeStyleProps
) => PathArray;

method getKeyStyle

protected getKeyStyle: (attributes: ParsedBaseEdgeStyleProps) => PathStyleProps;

method getLabelStyle

protected getLabelStyle: (
    attributes: ParsedBaseEdgeStyleProps
) => false | LabelStyleProps;

method getLoopPath

protected getLoopPath: (attributes: ParsedBaseEdgeStyleProps) => PathArray;

method onframe

protected onframe: () => void;

method render

render: (attributes?: Required<BaseEdgeStyleProps>, container?: Group) => void;

class BaseLayout

abstract class BaseLayout<O extends BaseLayoutOptions = any> {}

布局的基类
Base class for layout

constructor

constructor(context: RuntimeContext, options?: BaseLayoutOptions);

property context

protected context: RuntimeContext;

property id

abstract id: string;

property options

options: BaseLayoutOptions;

property stop

stop?: () => void;

property tick

tick?: (iterations?: number) => GraphData;

method execute

abstract execute: (model: GraphData, options?: O) => Promise<GraphData>;

class BaseNode

abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps>
    extends BaseElement<S>
    implements Node {}

节点元素的基类
Base node class
Remarks
自定义节点时，建议将此类作为基类。这样，你只需要关注如何实现 keyShape 的绘制逻辑
设计文档：https://www.yuque.com/antv/g6/gl1iof1xpzg6ed98
When customizing a node, it is recommended to use this class as the base class. This way, you can directly focus on how to implement the drawing logic of keyShape
Design document: https://www.yuque.com/antv/g6/gl1iof1xpzg6ed98

constructor

constructor(options: DisplayObjectConfig<S>);

property defaultStyleProps

static defaultStyleProps: Partial<BaseNodeStyleProps>;

property type

type: string;

method drawBadgeShapes

protected drawBadgeShapes: (attributes: Required<S>, container: Group) => void;

method drawHaloShape

protected drawHaloShape: (attributes: Required<S>, container: Group) => void;

method drawIconShape

protected drawIconShape: (attributes: Required<S>, container: Group) => void;

method drawKeyShape

protected abstract drawKeyShape: (
    attributes: Required<S>,
    container: Group
) => DisplayObject | undefined;

method drawLabelShape

protected drawLabelShape: (attributes: Required<S>, container: Group) => void;

method drawPortShapes

protected drawPortShapes: (attributes: Required<S>, container: Group) => void;

method getBadgesStyle

protected getBadgesStyle: (
    attributes: Required<S>
) => Record<string, NodeBadgeStyleProps | false>;

method getBadgeStyle

protected getBadgeStyle: (style: NodeBadgeStyleProps) => NodeBadgeStyleProps;

method getCenter

getCenter: () => Point;

Get the center point of the node.
Returns
The center point of the node.

method getHaloStyle

protected getHaloStyle: (attributes: Required<S>) => any;

method getIconStyle

protected getIconStyle: (attributes: Required<S>) => false | IconStyleProps;

method getIntersectPoint

getIntersectPoint: (point: Point, useExtendedLine?: boolean) => Point;

Get the point on the outer contour of the node that is the intersection with a line starting in the center the ending in the point p.
Parameter point
The point to intersect with the node.
Parameter useExtendedLine
Whether to use the extended line.
Returns
The intersection point.

method getKeyStyle

protected getKeyStyle: (attributes: Required<S>) => any;

method getLabelStyle

protected getLabelStyle: (attributes: Required<S>) => false | LabelStyleProps;

method getPorts

getPorts: () => Record<string, Port>;

Get the ports for the node.
Returns
Ports shape map.

method getPortsStyle

protected getPortsStyle: (
    attributes: Required<S>
) => Record<string, PortStyleProps | false>;

method getPortXY

protected getPortXY: (
    attributes: Required<S>,
    style: NodePortStyleProps
) => Point;

method getSize

protected getSize: (
    attributes?: S & import('@antv/g').BaseCustomElementStyleProps
) => import('../../types').Vector3;

method onframe

protected onframe: () => void;

method render

render: (attributes?: Required<S>, container?: Group) => void;

method update

update: (attr?: Partial<S>) => void;

class BasePlugin

abstract class BasePlugin<T extends BasePluginOptions> extends BaseExtension<T> {}

插件的基类
Base class for plugins

class BaseShape

abstract class BaseShape<
    StyleProps extends BaseShapeStyleProps
> extends CustomElement<StyleProps> {}

图形基类
Base class for shapes

constructor

constructor(options: DisplayObjectConfig<StyleProps>);

method animate

animate: (
    keyframes: Keyframe[],
    options?: number | KeyframeAnimationOptions
) => IAnimation | null;

method bindEvents

bindEvents: () => void;

method destroy

destroy: () => void;

method getGraphicStyle

getGraphicStyle: <T extends Record<string, any>>(
    style: T
) => Omit<
    T,
    | 'x'
    | 'y'
    | 'z'
    | 'transform'
    | 'transformOrigin'
    | 'className'
    | 'class'
    | 'zIndex'
    | 'visibility'
>;

从给定的属性对象中提取图形样式属性。删除特定的属性，如位置、变换和类名
Extracts the shape styles from a given attribute object. Removes specific styles like position, transformation, and class name.
Parameter style
属性对象 | attribute object
Returns
仅包含样式属性的对象 | An object containing only the style properties.

method getShape

getShape: <T extends DisplayObject>(name: string) => T;

method render

abstract render: (attributes: Required<StyleProps>, container: Group) => void;

在初始化时会被自动调用
will be called automatically when initializing
Parameter attributes
Parameter container

method update

update: (attr?: Partial<StyleProps>) => void;

method upsert

protected upsert: <T extends DisplayObject>(
    className: string,
    Ctor: string | (new (...args: any[]) => T),
    style: T['attributes'] | false,
    container: DisplayObject,
    hooks?: UpsertHooks
) => T | undefined;

创建、更新或删除图形
create, update or remove shape
Parameter className
图形名称 | shape name
Parameter Ctor
图形类型 | shape type
Parameter style
图形样式。若要删除图形，传入 false | shape style. Pass false to remove the shape
Parameter container
容器 | container
Parameter hooks
钩子函数 | hooks
Returns
图形实例 | shape instance

class BaseTransform

abstract class BaseTransform<
    T extends BaseTransformOptions = BaseTransformOptions
> extends BaseExtension<T> {}

数据转换的基类
Base class for data transforms

method afterLayout

afterLayout: {
    (type: 'pre', data: DrawData): void;
    (type: 'post', data?: undefined): void;
};

method beforeDraw

beforeDraw: (data: DrawData, context: DrawContext) => DrawData;

class BrushSelect

class BrushSelect extends BaseBehavior<BrushSelectOptions> {}

框选一组元素
Brush select elements

constructor

constructor(context: RuntimeContext, options: BrushSelectOptions);

property defaultOptions

static defaultOptions: Partial<BrushSelectOptions>;

class BubbleSets

class BubbleSets extends BasePlugin<BubbleSetsOptions> {}

气泡集
BubbleSets
Remarks
BubbleSets 最初由 Christopher Collins 在 2009 年的论文 "Bubble Sets: Revealing Set Relations with Isocontours over Existing Visualizations" 中提出。
实现原理是通过创建一种类似于气泡的形状来表示集合。每个集合都被表示为一个独特的 "气泡"，集合中的元素被包含在这个气泡内部。如果两个集合有交集，那么这两个气泡会有重叠的部分，这个重叠的部分就表示这两个集合的交集。
BubbleSets was originally proposed by Christopher Collins in the 2009 paper "Bubble Sets: Revealing Set Relations with Isocontours over Existing Visualizations".
The principle is to represent sets by creating a shape similar to a bubble. Each set is represented by a unique "bubble", and the elements in the set are contained within this bubble. If two sets have an intersection, then the two bubbles will have an overlapping part, which represents the intersection of the two sets.

constructor

constructor(context: RuntimeContext, options: BubbleSetsOptions);

property defaultOptions

static defaultOptions: Partial<BubbleSetsOptions>;

method addAvoidMember

addAvoidMember: (avoidMembers: ID | ID[]) => void;

添加需要避开的元素
Add elements to avoid
Parameter avoidMembers
单个或多个 | single or multiple

method addMember

addMember: (members: ID | ID[]) => void;

添加成员元素
Add member elements
Parameter members
单个或多个 | single or multiple

method getAvoidMember

getAvoidMember: () => string[];

获取需要避开的元素
Get elements to avoid
Returns
avoidMembers 成员元素数组 | member elements array

method getMember

getMember: () => string[];

获取成员元素
Get member elements
Returns
成员元素数组 | member elements array

method removeAvoidMember

removeAvoidMember: (avoidMembers: ID | ID[]) => void;

移除需要避开的元素
Remove elements to avoid
Parameter avoidMembers
单个或多个 | single or multiple

method removeMember

removeMember: (members: ID | ID[]) => void;

移除成员元素
Remove member elements
Parameter members
单个或多个 | single or multiple

method updateAvoidMember

updateAvoidMember: (avoidMembers: ID | ID[]) => void;

更新需要避开的元素
Update elements to avoid
Parameter avoidMembers
单个或多个 | single or multiple

method updateMember

updateMember: (members: string[] | ((prev: ID[]) => ID[])) => void;

更新成员元素
Update member elements
Parameter members
值或者回调函数 | value or callback function

class CameraSetting

class CameraSetting extends BasePlugin<CameraSettingOptions> {}

配置相机参数
Configure camera parameters

constructor

constructor(context: RuntimeContext, options: CameraSettingOptions);

class Canvas

class Canvas {}

constructor

constructor(config: CanvasConfig);

property context

readonly context: any;

property document

readonly document: any;

property ready

readonly ready: Promise<any[]>;

method appendChild

appendChild: <T extends IChildNode>(child: T, index?: number) => T;

method destroy

destroy: () => void;

method getBounds

getBounds: (group?: 'elements' | 'plugins') => any;

获取画布边界
Get canvas boundary
Parameter group
元素分组 - undefined: 获取整个画布边界 - 'elements': 仅获取元素边界 - 'plugins': 仅获取插件边界
Element group - undefined: Get the entire canvas boundary - 'elements': Get only the element boundary - 'plugins': Get only the plugin boundary
Returns
边界 Boundary

method getCamera

getCamera: (layer?: CanvasLayer) => any;

获取相机
Get camera
Parameter layer
图层 Layer
Returns
相机 Camera

method getCanvasByClient

getCanvasByClient: (point: Point) => Point;

method getCanvasByViewport

getCanvasByViewport: (point: Point) => Point;

method getClientByCanvas

getClientByCanvas: (point: Point) => Point;

method getClientByViewport

getClientByViewport: (point: Point) => Point;

method getConfig

getConfig: () => CanvasConfig;

method getContainer

getContainer: () => HTMLElement | null;

method getContextService

getContextService: (layer?: CanvasLayer) => any;

method getLayer

getLayer: (layer?: CanvasLayer) => GCanvas;

method getLayers

getLayers: () => Record<CanvasLayer, GCanvas>;

获取所有图层
Get all layers
Returns
图层 Layer

method getRenderer

getRenderer: (layer: CanvasLayer) => CanvasRenderer;

获取渲染器
Get renderer
Parameter layer
图层 Layer
Returns
渲染器 Renderer

method getRoot

getRoot: (layer?: CanvasLayer) => any;

method getSize

getSize: () => [number, number];

method getViewportByCanvas

getViewportByCanvas: (point: Point) => Point;

method getViewportByClient

getViewportByClient: (point: Point) => Point;

method resize

resize: (width: number, height: number) => void;

method setCursor

setCursor: (cursor: Cursor) => void;

method setRenderer

setRenderer: (renderer: CanvasOptions['renderer']) => void;

method toDataURL

toDataURL: (options?: Partial<DataURLOptions>) => Promise<string>;

class Circle

class Circle extends BaseNode {}

圆形节点
Circle node

constructor

constructor(options: DisplayObjectConfig<CircleStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<CircleStyleProps>;

method drawKeyShape

protected drawKeyShape: (
    attributes: Required<CircleStyleProps>,
    container: Group
) => GCircle | undefined;

method getIconStyle

protected getIconStyle: (
    attributes: Required<CircleStyleProps>
) => false | IconStyleProps;

method getIntersectPoint

getIntersectPoint: (point: Point, useExtendedLine?: boolean) => Point;

method getKeyStyle

protected getKeyStyle: (
    attributes: Required<CircleStyleProps>
) => GCircleStyleProps;

class CircleCombo

class CircleCombo extends BaseCombo<CircleComboStyleProps> {}

圆形组合
Circle combo

constructor

constructor(options: DisplayObjectConfig<CircleComboStyleProps>);

method drawKeyShape

protected drawKeyShape: (
    attributes: Required<CircleComboStyleProps>,
    container: Group
) => GCircle | undefined;

method getCollapsedKeySize

protected getCollapsedKeySize: (
    attributes: Required<CircleComboStyleProps>
) => STDSize;

method getExpandedKeySize

protected getExpandedKeySize: (
    attributes: Required<CircleComboStyleProps>
) => STDSize;

method getIntersectPoint

getIntersectPoint: (point: Point, useExtendedLine?: boolean) => Point;

method getKeyStyle

protected getKeyStyle: (
    attributes: Required<CircleComboStyleProps>
) => GCircleStyleProps;

class ClickSelect

class ClickSelect extends BaseBehavior<ClickSelectOptions> {}

点击元素
Click Element
Remarks
当鼠标点击元素时，可以激活元素的状态，例如选中节点或边。当 degree 设置为 1 时，点击节点会高亮当前节点及其直接相邻的节点和边。
When the mouse clicks on an element, you can activate the state of the element, such as selecting nodes or edges. When the degree is 1, clicking on a node will highlight the current node and its directly adjacent nodes and edges.

constructor

constructor(context: RuntimeContext, options: ClickSelectOptions);

property defaultOptions

static defaultOptions: Partial<ClickSelectOptions>;

method destroy

destroy: () => void;

class CollapseExpand

class CollapseExpand extends BaseBehavior<CollapseExpandOptions> {}

展开/收起元素交互
Collapse/Expand Element behavior
Remarks
通过操作展开/收起元素。
Expand/collapse elements by operation.

constructor

constructor(context: RuntimeContext, options: CollapseExpandOptions);

property defaultOptions

static defaultOptions: Partial<CollapseExpandOptions>;

method destroy

destroy: () => void;

method update

update: (options: Partial<CollapseExpandOptions>) => void;

class Contextmenu

class Contextmenu extends BasePlugin<ContextmenuOptions> {}

上下文菜单
Contextmenu
Remarks
上下文菜单，也被称为右键菜单，是当用户在某个特定区域上点击后出现的一个菜单。支持在点击前后，触发自定义事件。
Contextmenu, also known as the right-click menu , is a menu that appears when a user clicks on a specific area. Supports triggering custom events before and after clicking.

constructor

constructor(context: RuntimeContext, options: ContextmenuOptions);

property defaultOptions

static defaultOptions: Partial<ContextmenuOptions>;

method hide

hide: () => void;

隐藏上下文菜单
Hide the contextmenu

class CreateEdge

class CreateEdge extends BaseBehavior<CreateEdgeOptions> {}

创建边交互
Create edge behavior
Remarks
通过拖拽或点击节点创建边，支持自定义边样式。
Create edges by dragging or clicking nodes, and support custom edge styles.

constructor

constructor(context: RuntimeContext, options: CreateEdgeOptions);

property defaultOptions

static defaultOptions: Partial<CreateEdgeOptions>;

property source

source?: string;

method destroy

destroy: () => void;

class Cubic

class Cubic extends BaseEdge {}

三次贝塞尔曲线
Cubic Bezier curve

constructor

constructor(options: DisplayObjectConfig<CubicStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<CubicStyleProps>;

method getControlPoints

protected getControlPoints: (
    sourcePoint: Point,
    targetPoint: Point,
    curvePosition: [number, number],
    curveOffset: [number, number],
    controlPoints?: [Point, Point]
) => [Point, Point];

method getKeyPath

protected getKeyPath: (attributes: ParsedCubicStyleProps) => PathArray;

class CubicHorizontal

class CubicHorizontal extends Cubic {}

水平方向的三次贝塞尔曲线
Cubic Bezier curve in horizontal direction
Remarks
特别注意，计算控制点时主要考虑 x 轴上的距离，忽略 y 轴的变化
Please note that when calculating the control points, the distance on the x-axis is mainly considered, and the change on the y-axis is ignored

constructor

constructor(options: DisplayObjectConfig<CubicHorizontalStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<CubicHorizontalStyleProps>;

method getControlPoints

protected getControlPoints: (
    sourcePoint: Point,
    targetPoint: Point,
    curvePosition: [number, number],
    curveOffset: [number, number]
) => [Point, Point];

class CubicRadial

class CubicRadial extends Cubic {}

径向贝塞尔曲线
Radial cubic edge

constructor

constructor(options: DisplayObjectConfig<CubicStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<CubicStyleProps>;

method getControlPoints

protected getControlPoints: (
    sourcePoint: Point,
    targetPoint: Point,
    curvePosition: [number, number],
    curveOffset: [number, number]
) => [Point, Point];

method getEndpoints

protected getEndpoints: (
    attributes: Required<CubicStyleProps>
) => [Point, Point];

class CubicVertical

class CubicVertical extends Cubic {}

垂直方向的三次贝塞尔曲线
Cubic Bezier curve in vertical direction
Remarks
特别注意，计算控制点时主要考虑 y 轴上的距离，忽略 x 轴的变化
Please note that when calculating the control points, the distance on the y-axis is mainly considered, and the change on the x-axis is ignored

constructor

constructor(options: DisplayObjectConfig<CubicVerticalStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<CubicVerticalStyleProps>;

method getControlPoints

protected getControlPoints: (
    sourcePoint: Point,
    targetPoint: Point,
    curvePosition: [number, number],
    curveOffset: [number, number]
) => [Point, Point];

class Diamond

class Diamond extends Polygon {}

菱形节点
Diamond node

constructor

constructor(options: DisplayObjectConfig<DiamondStyleProps>);

method getPoints

protected getPoints: (attributes: Required<DiamondStyleProps>) => Point[];

class Donut

class Donut extends Circle {}

甜甜圈节点
Donut node

constructor

constructor(options: DisplayObjectConfig<DonutStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<DonutStyleProps>;

method drawDonutShape

protected drawDonutShape: (
    attributes: Required<DonutStyleProps>,
    container: Group
) => void;

method render

render: (attributes: Required<DonutStyleProps>, container?: Group) => void;

class DragCanvas

class DragCanvas extends BaseBehavior<DragCanvasOptions> {}

拖拽画布交互
Drag canvas behavior

constructor

constructor(context: RuntimeContext, options: DragCanvasOptions);

property defaultOptions

static defaultOptions: Partial<DragCanvasOptions>;

method destroy

destroy: () => void;

class DragElement

class DragElement extends BaseBehavior<DragElementOptions> {}

拖拽元素交互
Drag element behavior

constructor

constructor(context: RuntimeContext, options: DragElementOptions);

property defaultOptions

static defaultOptions: Partial<DragElementOptions>;

property enable

protected enable: boolean;

property target

protected target: string[];

method destroy

destroy: () => void;

class DragElementForce

class DragElementForce extends DragElement {}

调用力导布局拖拽元素的交互
Call d3-force layout to drag element behavior
Remarks
只能在使用 d3-force 布局时使用该交互，在拖拽过程中会实时重新计算布局。
This behavior can only be used with d3-force layout. The layout will be recalculated in real time during dragging.

class EdgeBundling

class EdgeBundling extends BasePlugin<EdgeBundlingOptions> {}

边绑定
Edge bundling
Remarks
边绑定（Edge Bundling）是一种图可视化技术，用于减少复杂网络图中的视觉混乱，并揭示图中的高级别模式和结构。其思想是将相邻的边捆绑在一起。
G6 中提供的边绑定插件是基于 FEDB（Force-Directed Edge Bundling for Graph Visualization）一文的实现：将边建模为可以相互吸引的柔性弹簧，通过自组织的方式进行捆绑。
Edge bundling is a graph visualization technique used to reduce visual clutter in complex network graphs and reveal high-level patterns and structures in the graph. The idea is to bundle adjacent edges together.
The edge bundling plugin provided in G6 is based on the implementation of the paper FEDB (Force-Directed Edge Bundling for Graph Visualization): modeling edges as flexible springs that can attract each other and bundling them in a self-organizing way.

constructor

constructor(context: RuntimeContext, options?: EdgeBundlingOptions);

property defaultOptions

static defaultOptions: Partial<EdgeBundlingOptions>;

property onBundle

protected onBundle: () => void;

method destroy

destroy: () => void;

class EdgeFilterLens

class EdgeFilterLens extends BasePlugin<EdgeFilterLensOptions> {}

边过滤镜插件
Edge filter lens plugin
Remarks
边过滤镜可以将关注的边保留在过滤镜范围内，其他边将在该范围内不显示。
EdgeFilterLens can keep the focused edges within the lens range, while other edges will not be displayed within that range.

constructor

constructor(context: RuntimeContext, options: EdgeFilterLensOptions);

property defaultOptions

static defaultOptions: Partial<EdgeFilterLensOptions>;

property graphDom

readonly graphDom: any;

property onEdgeFilter

protected onEdgeFilter: (event: IPointerEvent) => void;

method destroy

destroy: () => void;

method update

update: (options: Partial<EdgeFilterLensOptions>) => void;

class Ellipse

class Ellipse extends BaseNode {}

椭圆节点
Ellipse node

constructor

constructor(options: DisplayObjectConfig<EllipseStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<EllipseStyleProps>;

method drawKeyShape

protected drawKeyShape: (
    attributes: Required<EllipseStyleProps>,
    container: Group
) => GEllipse | undefined;

method getIconStyle

protected getIconStyle: (
    attributes: Required<EllipseStyleProps>
) => false | IconStyleProps;

method getIntersectPoint

getIntersectPoint: (point: Point, useExtendedLine?: boolean) => Point;

method getKeyStyle

protected getKeyStyle: (
    attributes: Required<EllipseStyleProps>
) => GEllipseStyleProps;

class FishboneLayout

class FishboneLayout extends BaseLayout {}

鱼骨图布局
Fishbone layout
Remarks
[鱼骨图布局](https://en.wikipedia.org/wiki/Ishikawa_diagram)是一种专门用于表示层次结构数据的图形布局方式。它通过模拟鱼骨的形状，将数据节点按照层次结构排列，使得数据的层次关系更加清晰直观。鱼骨图布局特别适用于需要展示因果关系、层次结构或分类信息的数据集。
[Fishbone layout](https://en.wikipedia.org/wiki/Ishikawa_diagram) is a graphical layout method specifically designed to represent hierarchical data. By simulating the shape of a fishbone, it arranges data nodes according to their hierarchical structure, making the hierarchical relationships of the data clearer and more intuitive. The fishbone diagram layout is particularly suitable for datasets that need to display causal relationships, hierarchical structures, or classification information.

property defaultOptions

static defaultOptions: Partial<FishboneLayoutOptions>;

property id

id: string;

method execute

execute: (
    data: GraphData,
    propOptions: FishboneLayoutOptions
) => Promise<GraphData>;

class Fisheye

class Fisheye extends BasePlugin<FisheyeOptions> {}

鱼眼放大镜
Fisheye Distortion
Remarks
Fisheye 鱼眼放大镜是为 focus+context 的探索场景设计的，它能够保证在放大关注区域的同时，保证上下文以及上下文与关注中心的关系不丢失。
Fisheye is designed for focus+context exploration, it keeps the context and the relationships between context and the focus while magnifying the focus area.

constructor

constructor(context: RuntimeContext, options: FisheyeOptions);

property defaultOptions

static defaultOptions: Partial<FisheyeOptions>;

property graphDom

readonly graphDom: any;

property onCreateFisheye

protected onCreateFisheye: (event: IPointerEvent) => void;

property onMagnify

protected onMagnify: (origin: Point) => void;

method destroy

destroy: () => void;

method update

update: (options: Partial<FisheyeOptions>) => void;

class FixElementSize

class FixElementSize extends BaseBehavior<FixElementSizeOptions> {}

缩放画布过程中固定元素大小
Fix element size while zooming

constructor

constructor(context: RuntimeContext, options: FixElementSizeOptions);

property defaultOptions

static defaultOptions: Partial<FixElementSizeOptions>;

method destroy

destroy: () => void;

class FocusElement

class FocusElement extends BaseBehavior<FocusElementOptions> {}

聚焦元素交互行为
Focus element behavior
Remarks
点击元素时，将元素聚焦到视图中心。
When an element is clicked, the element is focused to the center of the view.

constructor

constructor(context: RuntimeContext, options: FocusElementOptions);

property defaultOptions

static defaultOptions: Partial<FocusElementOptions>;

method destroy

destroy: () => void;

class Fullscreen

class Fullscreen extends BasePlugin<FullscreenOptions> {}

全屏
Full screen

constructor

constructor(context: RuntimeContext, options: FullscreenOptions);

property defaultOptions

static defaultOptions: Partial<FullscreenOptions>;

method destroy

destroy: () => void;

method exit

exit: () => void;

退出全屏
Exit full screen

method request

request: () => void;

请求全屏
Request full screen

class Graph

class Graph extends EventEmitter {}

constructor

constructor(options: GraphOptions);

property destroyed

destroyed: boolean;

当前图实例是否已经被销毁
Whether the current graph instance has been destroyed

property rendered

rendered: boolean;

当前图实例是否已经渲染
Whether the current graph instance has been rendered

method addChildrenData

addChildrenData: (parentId: ID, childrenData: NodeData[]) => void;

为树图节点添加子节点数据
Add child node data to the tree node
Parameter parentId
父节点 ID | parent node ID
Parameter childrenData
子节点数据 | child node data
Remarks
为组合添加子节点使用 addNodeData / addComboData 方法
Use addNodeData / addComboData method to add child nodes to the combo data

method addComboData

addComboData: (data: ComboData[] | ((prev: ComboData[]) => ComboData[])) => void;

新增组合数据
Add combo data
Parameter data
组合数据 | combo data
Example 1
graph.addComboData([{ id: 'combo-1' }]);
data

method addData

addData: (data: GraphData | ((prev: GraphData) => GraphData)) => void;

新增元素数据

Add element data

Parameter data

元素数据 | element data

Example 1

graph.addData({
 nodes: [{ id: 'node-1' }, { id: 'node-2' }],
 edges: [{ source: 'node-1', target: 'node-2' }],
});

data

method addEdgeData

addEdgeData: (data: EdgeData[] | ((prev: EdgeData[]) => EdgeData[])) => void;

新增边数据
Add edge data
Parameter data
边数据 | edge data
Example 1
graph.addEdgeData([{ source: 'node-1', target: 'node-2' }]);
data

method addNodeData

addNodeData: (data: NodeData[] | ((prev: NodeData[]) => NodeData[])) => void;

新增节点数据
Add node data
Parameter data
节点数据 | node data
Example 1
graph.addNodeData([{ id: 'node-1' }, { id: 'node-2' }]);
data

method clear

clear: () => Promise<void>;

清空画布元素
Clear canvas elements canvas

method collapseElement

collapseElement: (
    id: ID,
    options?: boolean | CollapseExpandNodeOptions
) => Promise<void>;

收起元素
Collapse element
Parameter id
元素 ID | element ID
Parameter options
是否启用动画或者配置收起节点的配置项 | whether to enable animation or the options of collapsing node element

method destroy

destroy: () => void;

销毁当前图实例
Destroy the current graph instance
Remarks
销毁后无法进行任何操作，如果需要重新使用，需要重新创建一个新的图实例
After destruction, no operations can be performed. If you need to reuse it, you need to create a new graph instance instance

method draw

draw: () => Promise<void>;

绘制元素
Draw elements
Returns
渲染结果 | draw result
Remarks
仅执行元素绘制，不会重新布局
⚠️ draw 为异步方法，如果需要在 draw 后执行一些操作，可以使用 await graph.draw() 或者监听 GraphEvent.AFTER_DRAW 事件
Only execute element drawing, no re-layout
⚠️ draw is an asynchronous method. If you need to perform some operations after draw, you can use await graph.draw() or listen to the GraphEvent.AFTER_DRAW event render

method expandElement

expandElement: (
    id: ID,
    options?: boolean | CollapseExpandNodeOptions
) => Promise<void>;

展开元素
Expand Element
Parameter id
元素 ID | element ID
Parameter animation
是否启用动画或者配置收起节点的配置项 | whether to enable animation or the options of collapsing node
Parameter options
element

method fitCenter

fitCenter: (animation?: ViewportAnimationEffectTiming) => Promise<void>;

将图平移至视口中心
Move the graph to the center of the viewport
Parameter animation
动画配置 | animation options viewport

method fitView

fitView: (
    options?: FitViewOptions,
    animation?: ViewportAnimationEffectTiming
) => Promise<void>;

将图缩放至合适大小并平移至视口中心
Zoom the graph to fit the viewport and move it to the center of the viewport
Parameter options
适配配置 | fit options
Parameter animation
动画配置 | animation options viewport

method focusElement

focusElement: (
    id: ID | ID[],
    animation?: ViewportAnimationEffectTiming
) => Promise<void>;

聚焦元素
Focus on element
Parameter id
元素 ID | element ID
Parameter animation
动画配置 | animation options
Remarks
移动图，使得元素对齐到视口中心
Move the graph so that the element is aligned to the center of the viewport viewport

method frontElement

frontElement: (id: ID | ID[]) => Promise<void>;

将元素置于最顶层
Bring the element to the front
Parameter id
元素 ID | element ID element

method getAncestorsData

getAncestorsData: (id: ID, hierarchy: HierarchyKey) => NodeLikeData[];

获取节点或组合的祖先元素数据
Get the ancestor element data of the node or combo
Parameter id
节点或组合ID | node or combo ID
Parameter hierarchy
指定树图层级关系还是组合层级关系 | specify tree or combo hierarchy relationship
Returns
祖先元素数据 | ancestor element data
Remarks
数组中的顺序是从父节点到祖先节点
The order in the array is from the parent node to the ancestor node data

method getBehaviors

getBehaviors: () => BehaviorOptions;

获取交互配置
Get behaviors options
Returns
交互配置 | behavior options behavior

method getCanvas

getCanvas: () => Canvas;

获取画布实例
Get canvas instance
Returns
- 画布实例 | canvas instance canvas

method getCanvasByClient

getCanvasByClient: (point: Point) => Point;

给定的浏览器坐标，转换为画布上的绘制坐标
Convert the given browser coordinates to drawing coordinates on the canvas
Parameter point
浏览器坐标 | browser coordinates
Returns
画布上的绘制坐标 | drawing coordinates on the canvas viewport

method getCanvasByViewport

getCanvasByViewport: (point: Point) => Point;

给定的视窗 DOM 坐标，转换为画布上的绘制坐标
Convert the given viewport DOM coordinates to the drawing coordinates on the canvas
Parameter point
视窗坐标 | viewport coordinates
Returns
画布上的绘制坐标 | drawing coordinates on the canvas viewport

method getCanvasCenter

getCanvasCenter: () => Point;

获取视口中心的视口坐标
Get the viewport coordinates of the viewport center
Returns
视口中心的视口坐标 | Viewport coordinates of the viewport center viewport

method getChildrenData

getChildrenData: (id: ID) => NodeLikeData[];

获取节点或组合的子元素数据
Get the child element data of the node or combo
Parameter id
节点或组合ID | node or combo ID
Returns
子元素数据 | child element data data

method getClientByCanvas

getClientByCanvas: (point: Point) => Point;

给定画布上的绘制坐标，转换为浏览器坐标
Convert the given drawing coordinates on the canvas to browser coordinates
Parameter point
画布坐标 | canvas coordinates
Returns
浏览器坐标 | browser coordinates viewport

method getComboData

getComboData: {
    (): ComboData[];
    (id: string): ComboData;
    (ids: string[]): ComboData[];
};

获取所有组合数据
Get all combo data
Returns
组合数据 | combo data data
获取单个组合数据
Get single combo data
Parameter id
组合ID | combo ID
Returns
组合数据 | combo data
Remarks
组合 id 必须存在，否则会抛出异常
Combo id must exist, otherwise an exception will be thrown
Example 1
const combo1 = graph.getComboData('combo-1');
data
批量获取多个组合数据
Get multiple combo data in batch
Parameter ids
组合ID 数组 | combo ID array
Returns
组合数据 | combo data
Remarks
数组中的每个组合 id 必须存在，否则将抛出异常
Each combo id in the array must exist, otherwise an exception will be thrown
Example 1
const [combo1, combo2] = graph.getComboData(['combo-1', 'combo-2']);
data

method getData

getData: () => Required<GraphData>;

获取图数据
Get graph data
Returns
图数据 | Graph data 获取当前图的数据，包括节点、边、组合数据
Get the data of the current graph, including node, edge, and combo data data

method getDescendantsData

getDescendantsData: (id: ID) => NodeLikeData[];

获取节点或组合的后代元素数据
Get the descendant element data of the node or combo
Parameter id
节点或组合ID | node or combo ID
Returns
后代元素数据 | descendant element data data

method getEdgeData

getEdgeData: {
    (): EdgeData[];
    (id: string): EdgeData;
    (ids: string[]): EdgeData[];
};

获取所有边数据
Get all edge data
Returns
边数据 | edge data data
获取单条边数据
Get single edge data
Parameter id
边 ID | edge ID
Returns
边数据 | edge data
Remarks
边 id 必须存在，否则会抛出异常
Edge id must exist, otherwise an exception will be thrown
Example 1
const edge1 = graph.getEdgeData('edge-1');
data
批量获取多条边数据
Get multiple edge data in batch
Parameter ids
边 ID 数组 | edge ID array
Returns
边数据 | edge data
Remarks
数组中的每个边 id 必须存在，否则将抛出异常
Each edge id in the array must exist, otherwise an exception will be thrown
Example 1
const [edge1, edge2] = graph.getEdgeData(['edge-1', 'edge-2']);
data

method getElementData

getElementData: { (id: ID): ElementDatum; (ids: string[]): ElementDatum[] };

获取单个元素数据
Get element data by ID
Parameter id
元素 ID | element ID
Returns
元素数据 | element data
Remarks
直接获取元素的数据而不必考虑元素类型
Get element data directly without considering the element type data
批量获取多个元素数据
Get multiple element data in batch
Parameter ids
元素 ID 数组 | element ID array
Remarks
直接获取元素的数据而不必考虑元素类型
Get element data directly without considering the element type data

method getElementDataByState

getElementDataByState: {
    (elementType: 'node', state: State): NodeData[];
    (elementType: 'edge', state: string): EdgeData[];
    (elementType: 'combo', state: string): ComboData[];
};

获取指定状态下的节点数据
Get node data in a specific state
Parameter state
状态 | state
Returns
节点数据 | node data
Example 1
const nodes = graph.getElementDataByState('node', 'selected');
data
获取指定状态下的边数据
Get edge data in a specific state
Parameter state
状态 | state
Returns
边数据 | edge data
Example 1
const nodes = graph.getElementDataByState('edge', 'selected');
data
获取指定状态下的组合数据
Get combo data in a specific state
Parameter state
状态 | state
Returns
组合数据 | combo data
Example 1
const nodes = graph.getElementDataByState('node', 'selected');
data

method getElementPosition

getElementPosition: (id: ID) => Point;

获取元素位置
Get element position
Parameter id
元素 ID | element ID
Returns
元素位置 | element position element

method getElementRenderBounds

getElementRenderBounds: (id: ID) => AABB;

获取元素自身以及子节点在世界坐标系下的渲染包围盒
Get the rendering bounding box of the element itself and its child nodes in the world coordinate system
Parameter id
元素 ID | element ID
Returns
渲染包围盒 | render bounding box element

method getElementRenderStyle

getElementRenderStyle: (id: ID) => Record<string, any>;

获取元素渲染样式
Get element rendering style
Parameter id
元素 ID | element ID
Returns
元素渲染样式 | element rendering style element

method getElementState

getElementState: (id: ID) => State[];

获取元素状态
Get element state
Parameter id
元素 ID | element ID
Returns
元素状态 | element state element

method getElementType

getElementType: (id: ID) => ElementType;

获取元素类型
Get element type
Parameter id
元素 ID | element ID
Returns
元素类型 | element type element

method getElementVisibility

getElementVisibility: (id: ID) => BaseStyleProps;

获取元素可见性
Get element visibility
Parameter id
元素 ID | element ID
Returns
元素可见性 | element visibility element

method getElementZIndex

getElementZIndex: (id: ID) => number;

获取元素层级
Get element z-index
Parameter id
元素 ID | element ID
Returns
元素层级 | element z-index element

method getLayout

getLayout: () => LayoutOptions;

获取布局配置
Get layout options
Returns
布局配置 | layout options layout

method getNeighborNodesData

getNeighborNodesData: (id: ID) => NodeData[];

获取节点或组合的一跳邻居节点数据
Get the one-hop neighbor node data of the node or combo
Parameter id
节点或组合ID | node or combo ID
Returns
邻居节点数据 | neighbor node data data

method getNodeData

getNodeData: {
    (): NodeData[];
    (id: string): NodeData;
    (ids: string[]): NodeData[];
};

获取所有节点数据
Get all node data
Returns
节点数据 | node data data
获取单个节点数据
Get single node data
Parameter id
节点 ID | node ID
Returns
节点数据 | node data
Remarks
节点 id 必须存在，否则会抛出异常
Node id must exist, otherwise an exception will be thrown
Example 1
const node1 = graph.getNodeData('node-1');
data
批量获取多个节点数据
Get multiple node data in batch
Parameter ids
节点 ID 数组 | node ID array
Returns
节点数据 | node data
Remarks
数组中的每个节点 id 必须存在，否则将抛出异常
Each node id in the array must exist, otherwise an exception will be thrown
Example 1
const [node1, node2] = graph.getNodeData(['node-1', 'node-2']);
data

method getOptions

getOptions: () => GraphOptions;

获取配置项
Get options
Returns
配置项 | options option

method getParentData

getParentData: (id: ID, hierarchy: HierarchyKey) => NodeLikeData | undefined;

获取节点或组合的父元素数据
Get the parent element data of the node or combo
Parameter id
节点或组合ID | node or combo ID
Parameter hierarchy
指定树图层级关系还是组合层级关系 | specify tree or combo hierarchy relationship
Returns
父元素数据 | parent element data data

method getPluginInstance

getPluginInstance: <T extends Plugin>(key: string) => T;

获取插件实例
Get plugin instance
Parameter key
插件 key（在配置 plugin 时需要手动传入指定） | plugin key(need to be specified manually when configuring plugin)
Returns
插件实例 | plugin instance
Remarks
一些插件提供了 API 方法可供调用，例如全屏插件可以调用 request 和 exit 方法来请求和退出全屏
Some plugins provide API methods for calling, such as the full-screen plugin can call the request and exit methods to request and exit full-screen
const fullscreen = graph.getPluginInstance('fullscreen'); fullscreen.request(); fullscreen.exit();
plugin

method getPlugins

getPlugins: () => PluginOptions;

获取插件配置
Get plugins options
Returns
插件配置 | plugin options plugin

method getPosition

getPosition: () => Point;

获取图的位置
Get the position of the graph
Returns
图的位置 | position of the graph
Remarks
即画布原点在视口坐标系下的位置。默认状态下，图的位置为 [0, 0]
That is, the position of the canvas origin in the viewport coordinate system. By default, the position of the graph is [0, 0] viewport

method getRelatedEdgesData

getRelatedEdgesData: (id: ID, direction?: EdgeDirection) => EdgeData[];

获取节点或组合关联边的数据
Get edge data related to the node or combo
Parameter id
节点或组合ID | node or combo ID
Parameter direction
边的方向 | edge direction
Returns
边数据 | edge data data

method getRotation

getRotation: () => number;

获取当前旋转角度
Get the current rotation angle
Returns
旋转角度 | rotation angle viewport

method getSize

getSize: () => [number, number];

获取当前画布容器的尺寸
Get the size of the current canvas container
Returns
画布尺寸 | canvas size canvas

method getTheme

getTheme: () => ThemeOptions;

获取主题
Get theme
Returns
当前主题 | current theme theme

method getTransforms

getTransforms: () => TransformOptions;

获取数据转换器配置
Get data transforms options
Returns
数据转换配置 | data transform options transform

method getViewportByCanvas

getViewportByCanvas: (point: Point) => Point;

给定画布上的绘制坐标，转换为视窗 DOM 的坐标
Convert the given drawing coordinates on the canvas to the coordinates of the viewport DOM
Parameter point
画布坐标 | canvas coordinates
Returns
视窗 DOM 的坐标 | coordinates of the viewport DOM viewport

method getViewportCenter

getViewportCenter: () => Point;

获取视口中心的画布坐标
Get the canvas coordinates of the viewport center
Returns
视口中心的画布坐标 | Canvas coordinates of the viewport center viewport

method getZoom

getZoom: () => number;

获取当前缩放比例
Get the current zoom ratio
Returns
缩放比例 | zoom ratio viewport

method getZoomRange

getZoomRange: () => GraphOptions['zoomRange'];

获取当前图的缩放区间
Get the zoom range of the current graph
Returns
缩放区间 | zoom range viewport

method hideElement

hideElement: (id: ID | ID[], animation?: boolean) => Promise<void>;

隐藏元素
Hide element
Parameter id
元素 ID | element ID
Parameter animation
是否启用动画 | whether to enable animation element

method layout

layout: (layoutOptions?: LayoutOptions) => Promise<void>;

执行布局
Execute layout
Parameter layoutOptions
布局配置项 | Layout options layout

method off

off: {
    (): this;
    (eventName: string): this;
    (eventName: string, callback: (...args: any[]) => void): this;
};

移除全部事件监听
Remove all event listeners
Returns
Graph 实例 | Graph instance event
移除指定事件的全部监听
Remove all listeners for the specified event
Parameter eventName
事件名称 | event name
Returns
Graph 实例 | Graph instance event
移除事件监听
Remove event listener
Parameter eventName
事件名称 | event name
Parameter callback
回调函数 | callback function
Returns
Graph 实例 | Graph instance event

method on

on: <T extends IEvent = IEvent>(
    eventName: string,
    callback: (event: T) => void,
    once?: boolean
) => this;

监听事件
Listen to events
Parameter eventName
事件名称 | event name
Parameter callback
回调函数 | callback function
Parameter once
是否只监听一次 | whether to listen only once
Returns
Graph 实例 | Graph instance event

method once

once: <T extends IEvent = IEvent>(
    eventName: string,
    callback: (event: T) => void
) => this;

一次性监听事件
Listen to events once
Parameter eventName
事件名称 | event name
Parameter callback
回调函数 | callback function
Returns
Graph 实例 | Graph instance event

method removeComboData

removeComboData: (ids: string[] | ((data: ComboData[]) => ID[])) => void;

删除组合数据
Remove combo data
Parameter ids
组合 ID 数组 | 组合 ID array
Example 1
graph.removeComboData(['combo-1']);
data

method removeData

removeData: (ids: DataID | ((data: GraphData) => DataID)) => void;

删除元素数据
Remove element data
Parameter ids
元素 ID 数组 | element ID array
Example 1
graph.removeData({ nodes: ['node-1', 'node-2'], edges: ['edge-1'], });
data

method removeEdgeData

removeEdgeData: (ids: string[] | ((data: EdgeData[]) => ID[])) => void;

删除边数据
Remove edge data
Parameter ids
边 ID 数组 | edge ID array
Remarks
如果传入边数据时仅提供了 source 和 target，那么需要通过 idOf 方法获取边的实际 ID
If only the source and target are provided when passing in the edge data, you need to get the actual ID of the edge through the idOf method
Example 1
graph.removeEdgeData(['edge-1']);
data

method removeNodeData

removeNodeData: (ids: string[] | ((data: NodeData[]) => ID[])) => void;

删除节点数据
Remove node data
Parameter ids
节点 ID 数组 | node ID array
Example 1
graph.removeNodeData(['node-1', 'node-2']);
data

method render

render: () => Promise<void>;

执行渲染
Render
Remarks
此过程会执行数据更新、绘制元素、执行布局
> ⚠️ render 为异步方法，如果需要在 render 后执行一些操作，可以使用 await graph.render() 或者监听 GraphEvent.AFTER_RENDER 事件
This process will execute data update, element rendering, and layout execution
> ⚠️ render is an asynchronous method. If you need to perform some operations after render, you can use await graph.render() or listen to the GraphEvent.AFTER_RENDER event render

method resize

resize: { (): void; (width: number, height: number): void };

调整画布大小为图容器大小
Resize the canvas to the size of the graph container viewport
调整画布大小为指定宽高
Resize the canvas to the specified width and height
Parameter width
宽度 | width
Parameter height
高度 | height viewport

method rotateBy

rotateBy: (
    angle: number,
    animation?: ViewportAnimationEffectTiming,
    origin?: Point
) => Promise<void>;

基于当前旋转角度进行旋转（相对旋转）
Rotate based on the current rotation angle (relative rotation)
Parameter angle
旋转角度 | rotation angle
Parameter animation
动画配置 | animation options
Parameter origin
旋转中心(视口坐标) | rotation center(viewport coordinates) viewport

method rotateTo

rotateTo: (
    angle: number,
    animation?: ViewportAnimationEffectTiming,
    origin?: Point
) => Promise<void>;

旋转画布至指定角度 (绝对旋转)
Rotate the canvas to the specified angle (absolute rotation)
Parameter angle
目标角度 | target angle
Parameter animation
动画配置 | animation options
Parameter origin
旋转中心(视口坐标) | rotation center(viewport coordinates) viewport

method setBehaviors

setBehaviors: (
    behaviors: BehaviorOptions | ((prev: BehaviorOptions) => BehaviorOptions)
) => void;

设置交互
Set behaviors
Parameter behaviors
交互配置 | behavior options
Remarks
设置的交互会全量替换原有的交互，如果需要新增交互可以使用如下方式：
The set behavior will completely replace the original behavior. If you need to add behavior, you can use the following method:
graph.setBehaviors((behaviors) => [...behaviors, { type: 'zoom-canvas' }])
behavior

method setCombo

setCombo: (combo: ComboOptions) => void;

设置组合样式映射
Set combo mapper
Parameter combo
组合配置 | combo options
Remarks
即 options.combo 的值
The value of options.combo element

method setData

setData: (data: GraphData | ((prev: GraphData) => GraphData)) => void;

设置全量数据
Set full data
Parameter data
数据 | data
Remarks
设置全量数据会替换当前图中的所有数据，G6 会自动进行数据差异计算
Setting full data will replace all data in the current graph, and G6 will automatically calculate the data difference data

method setEdge

setEdge: (edge: EdgeOptions) => void;

设置边样式映射
Set edge mapper
Parameter edge
边配置 | edge options
Remarks
即 options.edge 的值
The value of options.edge element

method setElementState

setElementState: {
    (id: ID, state: State | State[], animation?: boolean): Promise<void>;
    (
        state: Record<string, string | string[]>,
        animation?: boolean
    ): Promise<void>;
};

设置元素状态
Set element state
Parameter id
元素 ID | element ID
Parameter state
状态 | state
Parameter animation
动画配置 | animation options element
批量设置元素状态
Batch set element state
Parameter state
状态配置 | state options
Parameter animation
动画配置 | animation options element

method setElementVisibility

setElementVisibility: {
    (id: ID, visibility: BaseStyleProps, animation?: boolean): Promise<void>;
    (
        visibility: Record<string, BaseStyleProps>,
        animation?: boolean
    ): Promise<void>;
};

设置元素可见性
Set element visibility
Parameter id
元素 ID | element ID
Parameter visibility
可见性 | visibility
Parameter animation
动画配置 | animation options
Remarks
可见性配置包括 visible 和 hidden 两种状态
Visibility configuration includes two states: visible and hidden element
批量设置元素可见性
Batch set element visibility
Parameter visibility
可见性配置 | visibility options
Parameter animation
动画配置 | animation options element

method setElementZIndex

setElementZIndex: {
    (id: ID, zIndex: number): Promise<void>;
    (zIndex: Record<string, number>): Promise<void>;
};

设置元素层级
Set element z-index
Parameter id
元素 ID | element ID
Parameter zIndex
层级 | z-index element
批量设置元素层级
Batch set element z-index
Parameter zIndex
层级配置 | z-index options element

method setLayout

setLayout: (
    layout: LayoutOptions | ((prev: LayoutOptions) => LayoutOptions)
) => void;

设置布局
Set layout
Parameter layout
布局配置 | layout options
Example 1
graph.setLayout({ type: 'dagre', })
layout

method setNode

setNode: (node: NodeOptions) => void;

设置节点样式映射
Set node mapper
Parameter node
节点配置 | node options
Remarks
即 options.node 的值
The value of options.node element

method setOptions

setOptions: (options: GraphOptions) => void;

设置配置项
Set options
Parameter options
配置项 | options
Remarks
要更新 devicePixelRatio、container 属性请销毁后重新创建实例
To update devicePixelRatio and container properties, please destroy and recreate the instance option

method setPlugins

setPlugins: (
    plugins: PluginOptions | ((prev: PluginOptions) => PluginOptions)
) => void;

设置插件配置
Set plugins options
Parameter plugins
插件配置 | plugin options
Remarks
设置的插件会全量替换原有的插件配置，如果需要新增插件可以使用如下方式：
The set plugin will completely replace the original plugin configuration. If you need to add a plugin, you can use the following method:
graph.setPlugins((plugins) => [...plugins, { key: 'grid-line' }])
plugin

method setSize

setSize: (width: number, height: number) => void;

设置当前画布容器的尺寸
Set the size of the current canvas container
Parameter width
画布宽度 | canvas width
Parameter height
画布高度 | canvas height canvas

method setTheme

setTheme: (theme: ThemeOptions | ((prev: ThemeOptions) => ThemeOptions)) => void;

设置主题
Set theme
Parameter theme
主题名 | theme name
Example 1
graph.setTheme('dark');
theme

method setTransforms

setTransforms: (
    transforms: TransformOptions | ((prev: TransformOptions) => TransformOptions)
) => void;

设置数据转换器
Set data transforms
Parameter transforms
数据转换配置 | data transform options
Remarks
数据转换器能够在图渲染过程中执行数据转换，目前支持在渲染前对绘制数据进行转化。
Data transforms can perform data transformation during the rendering process of the graph. Currently, it supports transforming the drawing data before rendering. transform

method setZoomRange

setZoomRange: (zoomRange: GraphOptions['zoomRange']) => void;

设置当前图的缩放区间
Get the zoom range of the current graph
Parameter zoomRange
缩放区间 | zoom range viewport

method showElement

showElement: (id: ID | ID[], animation?: boolean) => Promise<void>;

显示元素
Show element
Parameter id
元素 ID | element ID
Parameter animation
是否启用动画 | whether to enable animation element

method stopLayout

stopLayout: () => void;

停止布局
Stop layout
Remarks
适用于带有迭代动画的布局，目前有 force 属于此类布局，即停止力导布局的迭代，一般用于布局迭代时间过长情况下的手动停止迭代动画，例如在点击画布/节点的监听中调用
Suitable for layouts with iterative animations. Currently, force belongs to this type of layout, that is, stop the iteration of the force-directed layout. It is generally used to manually stop the iteration animation when the layout iteration time is too long, such as calling in the click canvas/node listener layout

method toDataURL

toDataURL: (options?: Partial<DataURLOptions>) => Promise<string>;

导出画布内容为 DataURL
Export canvas content as DataURL
Parameter options
导出配置 | export options
Returns
DataURL | DataURL exportImage

method translateBy

translateBy: (
    offset: Point,
    animation?: ViewportAnimationEffectTiming
) => Promise<void>;

将图平移指定距离 (相对平移)
Translate the graph by the specified distance (relative translation)
Parameter offset
偏移量 | offset
Parameter animation
动画配置 | animation options viewport

method translateElementBy

translateElementBy: {
    (id: ID, offset: Point, animation?: boolean): Promise<void>;
    (offsets: Record<string, Point>, animation?: boolean): Promise<void>;
};

将元素平移指定距离 (相对平移)
Translate the element by the specified distance (relative translation)
Parameter id
元素 ID | element ID
Parameter offset
偏移量 | offset
Parameter animation
是否启用动画 | whether to enable animation element
批量将元素平移指定距离 (相对平移)
Batch translate elements by the specified distance (relative translation)
Parameter offsets
偏移量配置 | offset options
Parameter animation
是否启用动画 | whether to enable animation element

method translateElementTo

translateElementTo: {
    (id: ID, position: Point, animation?: boolean): Promise<void>;
    (positions: Record<string, Point>, animation?: boolean): Promise<void>;
};

将元素平移至指定位置 (绝对平移)
Translate the element to the specified position (absolute translation)
Parameter id
元素 ID | element ID
Parameter position
指定位置 | specified position
Parameter animation
是否启用动画 | whether to enable animation element
批量将元素平移至指定位置 (绝对平移)
Batch translate elements to the specified position (absolute translation)
Parameter positions
位置配置 | position options
Parameter animation
是否启用动画 | whether to enable animation element

method translateTo

translateTo: (
    position: Point,
    animation?: ViewportAnimationEffectTiming
) => Promise<void>;

将图平移至指定位置 (绝对平移)
Translate the graph to the specified position (absolute translation)
Parameter position
指定位置 | specified position
Parameter animation
动画配置 | animation options viewport

method updateBehavior

updateBehavior: (behavior: UpdateBehaviorOption) => void;

更新指定的交互配置
Update specified behavior options
Parameter behavior
交互配置 | behavior options
Remarks
如果要更新一个交互，那么必须在交互配置中指定 key 字段，例如：
If you want to update a behavior, you must specify the key field in the behavior options, for example:
{ behaviors: [{ type: 'zoom-canvas', key: 'zoom-canvas' }] } graph.updateBehavior({ key: 'zoom-canvas', enable: false })
behavior

method updateComboData

updateComboData: (
    data:
        | PartialNodeLikeData<ComboData>[]
        | ((prev: ComboData[]) => PartialNodeLikeData<ComboData>[])
) => void;

更新组合数据
Update combo data
Parameter data
组合数据 | combo data
Remarks
只需要传入需要更新的数据即可，不必传入完整的数据
Just pass in the data that needs to be updated, no need to pass in the complete data
Example 1
graph.updateComboData([{ id: 'combo-1', style: { x: 100, y: 100 } }]);
data

method updateData

updateData: (
    data: PartialGraphData | ((prev: GraphData) => PartialGraphData)
) => void;

更新元素数据
Update element data
Parameter data
元素数据 | element data
Remarks
只需要传入需要更新的数据即可，不必传入完整的数据
Just pass in the data that needs to be updated, no need to pass in the complete data
Example 1
graph.updateData({ nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }], edges: [{ id: 'edge-1', style: { lineWidth: 2 } }] });
data

method updateEdgeData

updateEdgeData: (
    data:
        | PartialEdgeData<EdgeData>[]
        | ((prev: EdgeData[]) => PartialEdgeData<EdgeData>[])
) => void;

更新边数据
Update edge data
Parameter data
边数据 | edge data
Remarks
只需要传入需要更新的数据即可，不必传入完整的数据
Just pass in the data that needs to be updated, no need to pass in the complete data
Example 1
graph.updateEdgeData([{ id: 'edge-1', style: { lineWidth: 2 } }]);
data

method updateNodeData

updateNodeData: (
    data:
        | PartialNodeLikeData<NodeData>[]
        | ((prev: NodeData[]) => PartialNodeLikeData<NodeData>[])
) => void;

更新节点数据
Update node data
Parameter data
节点数据 | node data
Remarks
只需要传入需要更新的数据即可，不必传入完整的数据
Just pass in the data that needs to be updated, no need to pass in the complete data
Example 1
graph.updateNodeData([{ id: 'node-1', style: { x: 100, y: 100 } }]);
data

method updatePlugin

updatePlugin: (plugin: UpdatePluginOption) => void;

更新插件配置
Update plugin options
Parameter plugin
插件配置 | plugin options
Remarks
如果要更新一个插件，那么必须在插件配置中指定 key 字段，例如：
If you want to update a plugin, you must specify the key field in the plugin options, for example:
{ plugins: [{ key: 'grid-line' }] } graph.updatePlugin({ key: 'grid-line', follow: true })
plugin

method updateTransform

updateTransform: (transform: UpdateTransformOption) => void;

更新数据转换器
Update data transform
Parameter transform
数据转换器配置 | data transform options transform

method zoomBy

zoomBy: (
    ratio: number,
    animation?: ViewportAnimationEffectTiming,
    origin?: Point
) => Promise<void>;

基于当前缩放比例进行缩放（相对缩放）
Zoom based on the current zoom ratio (relative zoom)
Parameter ratio
缩放比例 | zoom ratio
Parameter animation
动画配置 | animation options
Parameter origin
缩放中心(视口坐标) | zoom center(viewport coordinates)
Remarks
- ratio > 1 放大 - ratio < 1 缩小
- ratio > 1 zoom in - ratio < 1 zoom out viewport

method zoomTo

zoomTo: (
    zoom: number,
    animation?: ViewportAnimationEffectTiming,
    origin?: Point
) => Promise<void>;

缩放画布至指定比例（绝对缩放）
Zoom the canvas to the specified ratio (absolute zoom)
Parameter zoom
指定缩放比例 | specified zoom ratio
Parameter animation
动画配置 | animation options
Parameter origin
缩放中心(视口坐标) | zoom center(viewport coordinates)
Remarks
- zoom = 1 默认大小 - zoom > 1 放大 - zoom < 1 缩小
- zoom = 1 default size - zoom > 1 zoom in - zoom < 1 zoom out viewport

class GridLine

class GridLine extends BasePlugin<GridLineOptions> {}

网格线
Grid line
Remarks
网格线插件，多用于辅助绘图
Grid line plugin, often used to auxiliary drawing

constructor

constructor(context: RuntimeContext, options: GridLineOptions);

property defaultOptions

static defaultOptions: Partial<GridLineOptions>;

class Hexagon

class Hexagon extends Polygon<HexagonStyleProps> {}

六边形节点
Hexagon node

constructor

constructor(options: DisplayObjectConfig<HexagonStyleProps>);

method getIconStyle

protected getIconStyle: (
    attributes: Required<HexagonStyleProps>
) => false | IconStyleProps;

method getPoints

protected getPoints: (attributes: Required<HexagonStyleProps>) => Point[];

class History

class History extends BasePlugin<HistoryOptions> {}

历史记录
History
Remarks
历史记录用于记录图的数据变化，支持撤销和重做等操作。
History is used to record data changes in the graph and supports operations such as undo and redo.

constructor

constructor(context: RuntimeContext, options: HistoryOptions);

property defaultOptions

static defaultOptions: Partial<HistoryOptions>;

property redoStack

redoStack: Command[];

property undoStack

undoStack: Command[];

method canRedo

canRedo: () => boolean;

是否可以执行重做操作
Whether redo can be done
Returns
是否可以执行重做操作 | Whether redo can be done

method canUndo

canUndo: () => boolean;

是否可以执行撤销操作
Whether undo can be done
Returns
是否可以执行撤销操作 | Whether undo can be done

method clear

clear: () => void;

清空历史记录
Clear history

method on

on: (
    event: Loosen<HistoryEvent>,
    handler: (e: { cmd?: Command | null }) => void
) => void;

监听历史记录事件
Listen to history events
Parameter event
事件名称 | Event name
Parameter handler
事件处理函数 | Event handler

method redo

redo: () => this;

执行重做
Execute redo
Returns
返回当前实例 | Return the current instance

method undo

undo: () => this | undefined;

执行撤销
Execute undo
Returns
返回当前实例 | Return the current instance

method undoAndCancel

undoAndCancel: () => this;

执行撤销且不计入历史记录
Execute undo and do not record in history
Returns
返回当前实例 | Return the current instance

class HoverActivate

class HoverActivate extends BaseBehavior<HoverActivateOptions> {}

悬浮元素交互
Hover element behavior
Remarks
当鼠标悬停在元素上时，可以激活元素的状态，例如高亮节点或边。
When the mouse hovers over an element, you can activate the state of the element, such as highlighting nodes or edges.

constructor

constructor(context: RuntimeContext, options: HoverActivateOptions);

property defaultOptions

static defaultOptions: Partial<HoverActivateOptions>;

method destroy

destroy: () => void;

method getActiveIds

protected getActiveIds: (event: IPointerEvent<Element>) => string[];

class HTML

class HTML extends BaseNode<HTMLStyleProps> {}

HTML 节点
HTML node
See Also
- https://github.com/antvis/G/blob/next/packages/g/src/plugins/EventPlugin.ts

constructor

constructor(options: DisplayObjectConfig<HTMLStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<HTMLStyleProps>;

method attributeChangedCallback

attributeChangedCallback: (name: any, oldValue: any, newValue: any) => void;

method connectedCallback

connectedCallback: () => void;

method destroy

destroy: () => void;

method drawKeyShape

protected drawKeyShape: (
    attributes: Required<HTMLStyleProps>,
    container: Group
) => GHTML | undefined;

method getDomElement

protected getDomElement: () => HTMLElement;

method getKeyStyle

protected getKeyStyle: (attributes: Required<HTMLStyleProps>) => GHTMLStyleProps;

method onframe

protected onframe: () => void;

method render

render: (attributes?: Required<HTMLStyleProps>, container?: Group) => void;

Modifiers
- @override

class Hull

class Hull extends BasePlugin<HullOptions> {}

轮廓
Hull
Remarks
轮廓包围（Hull）用于处理和表示一组点的凸多边形包围盒。轮廓包围分为两种形态：凸包和凹包。
凸包（Convex Hull）：这是一个凸多边形，它包含所有的点，并且没有任何凹陷。你可以将其想象为一组点的最小包围盒，没有任何点在这个多边形的外部。
凹包（Concave Hull）：这是一个凹多边形，它同样包含所有的点，但是可能会有凹陷。凹包的凹陷程度由 concavity 参数控制。concavity 越大，凹陷越小。当 concavity 为 Infinity 时，凹包就变成了凸包。
Hull is used to process and represent the convex polygon bounding box of a set of points. Hull has two forms: convex hull and concave hull.
Convex Hull: This is a convex polygon that contains all points and has no concave. You can think of it as the smallest bounding box of a set of points, with no points outside the polygon.
Concave Hull: This is a concave polygon that also contains all points, but may have concave. The concavity of the concave hull is controlled by the concavity parameter. The larger the concavity, the smaller the concave. When concavity is Infinity, the concave hull becomes a convex hull.

constructor

constructor(context: RuntimeContext, options: HullOptions);

property defaultOptions

static defaultOptions: Partial<HullOptions>;

method addMember

addMember: (members: ID | ID[]) => void;

添加 Hull 成员
Add Hull member
Parameter members
元素 Ids | Element Ids

method getMember

getMember: () => string[];

获取 Hull 成员
Get Hull member
Returns
元素 Ids | Element Ids

method removeMember

removeMember: (members: ID | ID[]) => void;

移除 Hull 成员
Remove Hull member
Parameter members
元素 Ids | Element Ids

method updateMember

updateMember: (members: string[] | ((prev: ID[]) => ID[])) => void;

更新 Hull 成员
Update Hull member
Parameter members
元素 Ids | Element Ids

class Icon

class Icon extends BaseShape<IconStyleProps> {}

图标
Icon
Remarks
图标是一种特殊的图形，可以是图片或者文字。传入 src 属性时，会渲染图片；传入 text 属性时，会渲染文字。
Icon is a special shape, which can be an image or text. When the src attribute is passed in, an image will be rendered; when the text attribute is passed in, text will be rendered.

constructor

constructor(options: DisplayObjectConfig<IconStyleProps>);

method getIconStyle

protected getIconStyle: (attributes?: IconStyleProps) => IconStyleProps;

method render

render: (
    attributes?: IconStyleProps & import('@antv/g').BaseCustomElementStyleProps,
    container?: Group
) => void;

class Image

class Image extends BaseNode<ImageStyleProps> {}

图片节点
Image node

constructor

constructor(options: DisplayObjectConfig<ImageStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<ImageStyleProps>;

method drawHaloShape

protected drawHaloShape: (
    attributes: Required<ImageStyleProps>,
    container: Group
) => void;

method drawKeyShape

protected drawKeyShape: (
    attributes: Required<ImageStyleProps>,
    container: Group
) => ImageShape | undefined;

method getHaloStyle

protected getHaloStyle: (
    attributes: Required<ImageStyleProps>
) => false | GRectStyleProps;

method getIconStyle

protected getIconStyle: (
    attributes: Required<ImageStyleProps>
) => false | IconStyleProps;

method getKeyStyle

protected getKeyStyle: (
    attributes: Required<ImageStyleProps>
) => GImageStyleProps;

method update

update: (attr?: Partial<ImageStyleProps>) => void;

class Label

class Label extends BaseShape<LabelStyleProps> {}

标签
Label
Remarks
标签是一种具有背景的文本图形。
Label is a text shape with background.

constructor

constructor(options: DisplayObjectConfig<LabelStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<LabelStyleProps>;

method getBackgroundStyle

protected getBackgroundStyle: (
    attributes: Required<LabelStyleProps>
) => false | RectStyleProps;

method getGeometryBounds

getGeometryBounds: () => any;

method getTextStyle

protected getTextStyle: (
    attributes: Required<LabelStyleProps>
) => TextStyleProps;

method isBackgroundStyle

protected isBackgroundStyle: (key: string) => boolean;

method isTextStyle

protected isTextStyle: (key: string) => boolean;

method render

render: (attributes?: Required<LabelStyleProps>, container?: Group) => void;

class LassoSelect

class LassoSelect extends BrushSelect {}

套索选择交互
Lasso select behavior
Remarks
用不规则多边形框选一组元素。
Select a group of elements with an irregular polygon.

class Legend

class Legend extends BasePlugin<LegendOptions> {}

图例
Legend
Remarks
图例插件用于展示图中元素的分类信息，支持节点、边、组合的分类信息展示。
The legend plugin is used to display the classification information of elements in the graph, and supports the display of classification information of nodes, edges, and combos.

constructor

constructor(context: RuntimeContext, options: LegendOptions);

property click

click: (event: Selection) => void;

图例元素点击事件
Legend element click event
Parameter event
点击的元素 | The element that is clicked

property defaultOptions

static defaultOptions: Partial<LegendOptions>;

property mouseenter

mouseenter: (event: Selection) => void;

图例元素移入事件
Legend element mouseenter event
Parameter event
移入的元素 | The element that is moved in

property mouseleave

mouseleave: (event: Selection) => void;

图例元素移出事件
Legend element mouseleave event
Parameter event
移出的元素 | The element that is moved out

method updateElement

updateElement: () => void;

刷新图例元素状态
Refresh the status of the legend element

class Line

class Line extends BaseEdge {}

直线
Line

constructor

constructor(options: DisplayObjectConfig<LineStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<LineStyleProps>;

method getKeyPath

protected getKeyPath: (attributes: ParsedLineStyleProps) => PathArray;

class MapNodeSize

class MapNodeSize extends BaseTransform<MapNodeSizeOptions> {}

根据节点重要性调整节点的大小
Map node size based on node importance
Remarks
在图可视化中，节点的大小通常用于传达节点的重要性或影响力。通过根据节点中心性调整节点的大小，我们可以更直观地展示网络中各个节点的重要性，从而帮助用户更好地理解和分析复杂的网络结构。
In graph visualization, the size of a node is usually used to convey the importance or influence of the node. By adjusting the size of the node based on the centrality of the node, we can more intuitively show the importance of each node in the network, helping users better understand and analyze complex network structures.

constructor

constructor(context: RuntimeContext, options: MapNodeSizeOptions);

property defaultOptions

static defaultOptions: Partial<MapNodeSizeOptions>;

method beforeDraw

beforeDraw: (input: DrawData) => DrawData;

class Minimap

class Minimap extends BasePlugin<MinimapOptions> {}

缩略图插件
Minimap plugin

constructor

constructor(context: RuntimeContext, options: MinimapOptions);

property defaultOptions

static defaultOptions: Partial<MinimapOptions>;

method destroy

destroy: () => void;

method update

update: (options: Partial<MinimapOptions>) => void;

class OptimizeViewportTransform

class OptimizeViewportTransform extends BaseBehavior<OptimizeViewportTransformOptions> {}

操作画布过程中隐藏元素
Hide elements during canvas operations (dragging, zooming, scrolling)

constructor

constructor(context: RuntimeContext, options: OptimizeViewportTransformOptions);

property defaultOptions

static defaultOptions: Partial<OptimizeViewportTransformOptions>;

method destroy

destroy: () => void;

method update

update: (options: Partial<OptimizeViewportTransformOptions>) => void;

class PlaceRadialLabels

class PlaceRadialLabels extends BaseTransform<PlaceRadialLabelsOptions> {}

根据径向布局自动调整节点标签样式，包括位置和旋转角度
Automatically adjust the style of node labels according to the radial layout, including position and rotation angle

constructor

constructor(context: RuntimeContext, options: PlaceRadialLabelsOptions);

property defaultOptions

static defaultOptions: Partial<PlaceRadialLabelsOptions>;

method afterLayout

afterLayout: () => void;

class Polyline

class Polyline extends BaseEdge {}

折线
Polyline

constructor

constructor(options: DisplayObjectConfig<PolylineStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<PolylineStyleProps>;

method getControlPoints

protected getControlPoints: (attributes: ParsedPolylineStyleProps) => Point[];

method getKeyPath

protected getKeyPath: (attributes: ParsedPolylineStyleProps) => PathArray;

method getLoopPath

protected getLoopPath: (attributes: ParsedPolylineStyleProps) => PathArray;

method getPoints

protected getPoints: (attributes: ParsedPolylineStyleProps) => Point[];

class ProcessParallelEdges

class ProcessParallelEdges extends BaseTransform<ProcessParallelEdgesOptions> {}

处理平行边，即多条边共享同一源节点和目标节点
Process parallel edges which share the same source and target nodes
Remarks
平行边（Parallel Edges）是指在图结构中，两个节点之间存在多条边。这些边共享相同的源节点和目标节点，但可能代表不同的关系或属性。为了避免边的重叠和混淆，提供了两种处理平行边的方式：(1) 捆绑模式（bundle）：将平行边捆绑在一起，通过改变曲率与其他边分开；(2) 合并模式（merge）：将平行边合并为一条聚合。
Parallel Edges refer to multiple edges existing between two nodes in a graph structure. These edges share the same source and target nodes but may represent different relationships or attributes. To avoid edge overlap and confusion, two methods are provided for handling parallel edges: (1) Bundle Mode: Bundles parallel edges together and separates them from other edges by altering their curvature; (2) Merge Mode: Merges parallel edges into a single aggregated edge.

constructor

constructor(context: RuntimeContext, options: ProcessParallelEdgesOptions);

property applyBundlingStyle

protected applyBundlingStyle: (
    input: DrawData,
    edges: Map<ID, EdgeData>,
    distance: number
) => void;

property applyMergingStyle

protected applyMergingStyle: (input: DrawData, edges: Map<ID, EdgeData>) => void;

property defaultOptions

static defaultOptions: Partial<ProcessParallelEdgesOptions>;

method beforeDraw

beforeDraw: (input: DrawData) => DrawData;

在每次绘制前处理平行边
Process parallel edges before each drawing
Parameter input

class Quadratic

class Quadratic extends BaseEdge {}

二次贝塞尔曲线
Quadratic Bezier curve

constructor

constructor(options: DisplayObjectConfig<QuadraticStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<QuadraticStyleProps>;

method getKeyPath

protected getKeyPath: (attributes: ParsedQuadraticStyleProps) => PathArray;

class Rect

class Rect extends BaseNode<RectStyleProps> {}

矩形节点
Rect node

constructor

constructor(options: DisplayObjectConfig<RectStyleProps>);

method drawKeyShape

protected drawKeyShape: (
    attributes: ParsedRectStyleProps,
    container: Group
) => GRect | undefined;

method getIconStyle

protected getIconStyle: (
    attributes: ParsedRectStyleProps
) => false | IconStyleProps;

method getKeyStyle

protected getKeyStyle: (attributes: ParsedRectStyleProps) => GRectStyleProps;

class RectCombo

class RectCombo extends BaseCombo<RectComboStyleProps> {}

矩形组合
Rect combo

constructor

constructor(options: DisplayObjectConfig<RectComboStyleProps>);

method drawKeyShape

protected drawKeyShape: (
    attributes: Required<RectComboStyleProps>,
    container: Group
) => GRect | undefined;

method getKeyStyle

protected getKeyStyle: (
    attributes: Required<RectComboStyleProps>
) => GRectStyleProps;

class ScrollCanvas

class ScrollCanvas extends BaseBehavior<ScrollCanvasOptions> {}

滚动画布交互
Scroll canvas behavior

constructor

constructor(context: RuntimeContext, options: ScrollCanvasOptions);

property defaultOptions

static defaultOptions: Partial<ScrollCanvasOptions>;

property graphDom

readonly graphDom: any;

method destroy

destroy: () => void;

销毁画布滚动
Destroy the canvas scrolling

class Shortcut

class Shortcut {}

constructor

constructor(emitter: EventEmitter);

property pinchHandler

pinchHandler: PinchHandler;

method bind

bind: (key: ShortcutKey, handler: Handler) => void;

method destroy

destroy: () => void;

method match

match: (key: ShortcutKey) => boolean;

method unbind

unbind: (key: ShortcutKey, handler?: Handler) => void;

method unbindAll

unbindAll: () => void;

class SnakeLayout

class SnakeLayout extends BaseLayout {}

蛇形布局
Snake layout
Remarks
蛇形布局（Snake Layout）是一种特殊的图形布局方式，能够在较小的空间内更有效地展示长链结构。需要注意的是，其图数据需要确保节点按照从源节点到汇节点的顺序进行线性排列，形成一条明确的路径。
节点按 S 字型排列，第一个节点位于第一行的起始位置，接下来的节点在第一行向右排列，直到行末尾。到达行末尾后，下一行的节点从右向左反向排列。这个过程重复进行，直到所有节点排列完毕。
The Snake layout is a special way of graph layout that can more effectively display long chain structures in a smaller space. Note that the graph data needs to ensure that the nodes are linearly arranged in the order from the source node to the sink node to form a clear path.
The nodes are arranged in an S-shaped pattern, with the first node at the beginning of the first row, and the following nodes arranged to the right until the end of the row. After reaching the end of the row, the nodes in the next row are arranged in reverse from right to left. This process is repeated until all nodes are arranged.

property defaultOptions

static defaultOptions: Partial<SnakeLayoutOptions>;

property id

id: string;

method execute

execute: (model: GraphData, options?: SnakeLayoutOptions) => Promise<GraphData>;

class Snapline

class Snapline extends BasePlugin<SnaplineOptions> {}

对齐线插件
Snapline plugin

constructor

constructor(context: RuntimeContext, options: SnaplineOptions);

property defaultOptions

static defaultOptions: Partial<SnaplineOptions>;

property onDrag

protected onDrag: (event: IDragEvent<Node>) => Promise<void>;

property onDragEnd

protected onDragEnd: () => void;

property onDragStart

protected onDragStart: () => void;

method destroy

destroy: () => void;

class Star

class Star extends Polygon<StarStyleProps> {}

五角星节点
Star node

constructor

constructor(options: DisplayObjectConfig<StarStyleProps>);

method getIconStyle

protected getIconStyle: (
    attributes: Required<StarStyleProps>
) => false | IconStyleProps;

method getPoints

protected getPoints: (attributes: Required<StarStyleProps>) => Point[];

method getPortXY

protected getPortXY: (
    attributes: Required<StarStyleProps>,
    style: NodePortStyleProps
) => Point;

class Timebar

class Timebar extends BasePlugin<TimebarOptions> {}

时间组件
Timebar

constructor

constructor(context: RuntimeContext, options: TimebarOptions);

property defaultOptions

static defaultOptions: Partial<TimebarOptions>;

method backward

backward: () => void;

后退
Backward

method forward

forward: () => void;

前进
Forward

method pause

pause: () => void;

暂停
Pause

method play

play: () => void;

播放
Play

method reset

reset: () => void;

重置
Reset

class Toolbar extends BasePlugin<ToolbarOptions> {}

工具栏，支持配置工具栏项目，以及点击之后的回调方法
Toolbar, support configuration of toolbar items, and callback methods after clicking

constructor(context: RuntimeContext, options: ToolbarOptions);

static defaultOptions: Partial<ToolbarOptions>;

class Tooltip extends BasePlugin<TooltipOptions> {}

提示框插件
Tooltip plugin

constructor

constructor(context: RuntimeContext, options: TooltipOptions);

property defaultOptions

static defaultOptions: Partial<TooltipOptions>;

property hide

hide: (event?: IElementEvent) => void;

隐藏tooltip
Hidden tooltip
Parameter event
目标元素,不传则为外部调用 | Target element, not passed in as external call

property onCanvasMove

onCanvasMove: (event: IElementEvent) => void;

移动画布
Move canvas
Parameter event
目标元素 | target element

property onClick

onClick: (event: IElementEvent) => void;

点击事件
Click event
Parameter event
元素 | element

property onPointerLeave

onPointerLeave: (event: IElementEvent) => void;

点击画布/触发拖拽/出现上下文菜单隐藏tooltip
Hide tooltip when clicking canvas/triggering drag/appearing context menu
Parameter event
目标元素 | target element

property onPointerMove

onPointerMove: (event: IElementEvent) => void;

在目标元素(node/edge/combo)上移动
Move on target element (node/edge/combo)
Parameter event
目标元素 | target element

property showById

showById: (id: ID) => Promise<void>;

显示目标元素的提示框
Show tooltip of target element
Parameter id
元素 ID | element ID

class Triangle

class Triangle extends Polygon<TriangleStyleProps> {}

三角形节点
Triangle node

constructor

constructor(options: DisplayObjectConfig<TriangleStyleProps>);

property defaultStyleProps

static defaultStyleProps: Partial<TriangleStyleProps>;

method getIconStyle

protected getIconStyle: (
    attributes: Required<TriangleStyleProps>
) => false | IconStyleProps;

method getPoints

protected getPoints: (attributes: Required<TriangleStyleProps>) => Point[];

method getPortXY

protected getPortXY: (
    attributes: Required<TriangleStyleProps>,
    style: NodePortStyleProps
) => Point;

class Watermark

class Watermark extends BasePlugin<WatermarkOptions> {}

水印
Watermark
Remarks
支持使用文本和图片作为水印，实现原理是在 Graph 容器的 div 上加上 background-image 属性，然后就可以通过 css 来控制水印的位置和样式。对于文本，会使用隐藏 canvas 转成图片的方式来实现
Support using text and image as watermark, the principle is to add the background-image property to the div of the Graph container, and then you can control the position and style of the watermark through css. For text, it will be converted to an image using a hidden canvas

constructor

constructor(context: RuntimeContext, options: WatermarkOptions);

property defaultOptions

static defaultOptions: Partial<WatermarkOptions>;

class ZoomCanvas

class ZoomCanvas extends BaseBehavior<ZoomCanvasOptions> {}

缩放画布交互
Zoom canvas behavior

constructor

constructor(context: RuntimeContext, options: ZoomCanvasOptions);

property defaultOptions

static defaultOptions: Partial<ZoomCanvasOptions>;

property onReset

protected onReset: () => Promise<void>;

property zoom

protected zoom: (
    value: number,
    event: IWheelEvent | IKeyboardEvent | IPointerEvent,
    animation: ZoomCanvasOptions['animation']
) => Promise<void>;

缩放画布
Zoom canvas
Parameter value
缩放值， > 0 放大， < 0 缩小 | Zoom value, > 0 zoom in, < 0 zoom out
Parameter event
事件对象 | Event object
Parameter animation
缩放动画配置 | Zoom animation configuration

method destroy

destroy: () => void;

销毁缩放画布
Destroy zoom canvas

Interfaces

interface AnimationContext

interface AnimationContext {}

property element

element: Element;

执行动画的元素
Element to execute animation

property elementType

elementType: ElementType;

元素类型
Element type

property modifiedStyle

modifiedStyle?: Record<string, unknown>;

额外的动画终态样式
Additional animation final state style
Remarks
例如元素销毁前，需要将元素的终态透明度设置为 0
For example, before the element is destroyed, the final state opacity of the element needs to be set to 0

property originalStyle

originalStyle: Record<string, unknown>;

动画的源样式
Source style of animation
Remarks
用于在动画执行前将 shape 的样式设置为源样式，例如 move-to 动画，需要将 shape 的 x, y 设置为源样式
Used to set the style of shape to the source style before the animation is executed. For example, the move-to animation needs to set the x and y of shape to the source style

property stage

stage: AnimationStage;

动画阶段
Animation stage

property updatedStyle

updatedStyle?: Record<string, unknown>;

变更样式
Updated style

interface AnimationEffectTiming

interface AnimationEffectTiming {}

动画效果时序
Animation effect timing

property delay

delay?: number;

动画延迟时间
Animation delay time

property direction

direction?: PlaybackDirection;

动画方向
Animation direction

property duration

duration?: number;

动画持续时间
Animation duration

property easing

easing?: string;

动画缓动函数
Animation easing function

property fill

fill?: FillMode;

动画结束后的填充模式
Fill mode after the animation ends

property iterations

iterations?: number;

动画迭代次数
Number of iterations of the animation

interface AnimationOptions

interface AnimationOptions extends AnimationEffectTiming {}

元素动画选项
Element animation options

property fields

fields: string[];

执行动画的字段（样式）名
Field (style) name of the animation

property shape

shape?: string;

执行动画的图形，默认为当前元素
Shape of the animation, default is the current element

property states

states?: State[];

参与动画的状态
States involved in the animation

interface AutoAdaptLabelOptions

interface AutoAdaptLabelOptions extends BaseBehaviorOptions {}

标签自适应显示配置项
Auto Adapt Label Options

property enable

enable?: boolean | ((event: IEvent) => boolean);

是否启用
Whether to enable

property padding

padding?: Padding;

设置标签的内边距，用于判断标签是否重叠，以避免标签显示过于密集
Set the padding of the label to determine whether the label overlaps to avoid the label being displayed too densely

property sort

sort?: (elementA: ElementDatum, elementB: ElementDatum) => -1 | 0 | 1;

根据元素的重要性从高到低排序，重要性越高的元素其标签显示优先级越高。一般情况下 combo > node > edge
Sort elements by their importance in descending order; elements with higher importance have higher label display priority; usually combo > node > edge

property sortCombo

sortCombo?: (comboA: ComboData, comboB: ComboData) => -1 | 0 | 1;

根据群组的重要性从高到低排序，重要性越高的群组其标签显示优先级越高。默认按照数据先后进行排序。需要注意，如果设置了 sort，则 sortCombo 不会生效
Sort combos by importance in descending order; combos with higher importance have higher label display priority. By default, they are sorted according to the data. It should be noted that if sort is set, sortCombo will not take effect

property sortEdge

sortEdge?: (edgeA: EdgeData, edgeB: EdgeData) => -1 | 0 | 1;

根据边的重要性从高到低排序，重要性越高的边其标签显示优先级越高。默认按照数据先后进行排序。需要注意，如果设置了 sort，则 sortEdge 不会生效
Sort edges by importance in descending order; edges with higher importance have higher label display priority. By default, they are sorted according to the data. It should be noted that if sort is set, sortEdge will not take effect

property sortNode

sortNode?:
    | NodeCentralityOptions
    | ((nodeA: NodeData, nodeB: NodeData) => -1 | 0 | 1);

根据节点的重要性从高到低排序，重要性越高的节点其标签显示优先级越高。内置几种中心性算法，也可以自定义排序函数。需要注意，如果设置了 sort，则 sortNode 不会生效
Sort nodes by importance in descending order; nodes with higher importance have higher label display priority. Several centrality algorithms are built in, and custom sorting functions can also be defined. It should be noted that if sort is set, sortNode will not take effect

property throttle

throttle?: number;

节流时间
Throttle time

interface BackgroundOptions

interface BackgroundOptions extends BasePluginOptions, CSSStyleDeclaration {}

背景配置项
Background options

interface BadgeStyleProps

interface BadgeStyleProps extends LabelStyleProps {}

徽标样式
Badge style

interface BaseBehaviorOptions

interface BaseBehaviorOptions extends CustomBehaviorOption {}

交互通用配置项
Base options for behaviors

interface BaseComboStyleProps

interface BaseComboStyleProps
    extends BaseNodeStyleProps,
        Prefix<'collapsed', BaseStyleProps>,
        Prefix<'collapsedMarker', CollapsedMarkerStyleProps> {}

组合通用样式配置项
Common style props for combo

property childrenData

childrenData?: NodeLikeData[];

组合的子元素数据
The data of the children of combo
Remarks
如果组合是收起状态，children 可能为空，通过 childrenData 能够获取完整的子元素数据
If the combo is collapsed, children may be empty, and the complete child element data can be obtained through childrenData

property childrenNode

childrenNode?: ID[];

组合的子元素，可以是节点或者组合
The children of combo, which can be nodes or combos

property collapsedMarker

collapsedMarker?: boolean;

组合收起时是否显示标记
Whether to show the marker when the combo is collapsed

property collapsedSize

collapsedSize?: Size;

组合收起后的默认大小
The default size of combo when collapsed

property padding

padding?: Padding;

组合的内边距，只在展开状态下生效
The padding of combo, only effective when expanded

property size

size?: Size;

组合展开后的默认大小
The default size of combo when expanded

interface BaseEdgeStyleProps

interface BaseEdgeStyleProps
    extends BaseShapeStyleProps,
        Prefix<'label', EdgeLabelStyleProps>,
        Prefix<'halo', PathStyleProps>,
        Prefix<'badge', EdgeBadgeStyleProps>,
        Prefix<'startArrow', EdgeArrowStyleProps>,
        Prefix<'endArrow', EdgeArrowStyleProps>,
        Prefix<'loop', LoopStyleProps> {}

边的通用样式属性
Base style properties of the edge

property badge

badge?: boolean;

是否显示边的徽标
Whether to display the badge of the edge

property endArrow

endArrow?: boolean;

是否显示边的结束箭头
Whether to display the end arrow of the edge

property endArrowOffset

endArrowOffset?: number;

结束箭头的偏移量
Offset of the end arrow

property halo

halo?: boolean;

是否显示边的光晕
Whether to display the halo of the edge

property isBillboard

isBillboard?: boolean;

3D 场景中生效，始终朝向屏幕，因此线宽不受透视投影影像
Effective in 3D scenes, always facing the screen, so the line width is not affected by the perspective projection image

property label

label?: boolean;

是否显示边的标签
Whether to display the label of the edge

property loop

loop?: boolean;

是否启用自环边
Whether to enable self-loop edge

property markerEnd

markerEnd?: DisplayObject | null;

在 “终点” 处添加一个标记图形，其中 “终点” 为边与终止节点的交点
Add a marker at the "end point", where the "end point" is the intersection of the edge and the target node

property markerEndOffset

markerEndOffset?: number;

调整 “终点” 处标记图形的位置，正偏移量向内，负偏移量向外
Adjust the position of the marker at the "end point", positive offset inward, negative offset outward

property markerMid

markerMid?: DisplayObject | null;

在路径除了 “起点” 和 “终点” 之外的每一个顶点上放置标记图形。在内部实现中，由于我们会把路径中部分命令转换成 C 命令，因此这些顶点实际是三阶贝塞尔曲线的控制点
Place a marker on each vertex of the path except for the "start point" and "end point". In the internal implementation, because we will convert some commands in the path to C commands, these controlPoints are actually the control points of the cubic Bezier curve

property markerStart

markerStart?: DisplayObject | null;

在 “起点” 处添加一个标记图形，其中 “起始点” 为边与起始节点的交点
Add a marker at the "start point", where the "start point" is the intersection of the edge and the source node

property markerStartOffset

markerStartOffset?: number;

调整 “起点” 处标记图形的位置，正偏移量向内，负偏移量向外
Adjust the position of the marker at the "start point", positive offset inward, negative offset outward

property sourceNode

sourceNode: ID;

边的起点 ID
The ID of the source node
Remarks
该属性指向物理意义上的起点，由 G6 内部维护，用户无需过多关注。通常情况下，sourceNode 与上一级的 source 属性一致。但在某些情况下，sourceNode 可能会被 G6 内部转换，例如在 Combo 收起时内部节点上的边会自动连接到父 Combo，此时 sourceNode 会变更为父 Combo 的 ID。
This property concerning the physical origin, maintained internally by G6. In general, sourceNode corresponds to the source attribute of the parent level. However, in certain cases, such as when a Combo is collapsed and internal nodes are destroyed, corresponding edges will automatically connect to the parent Combo. At this point, sourceNode will be changed to the ID of the parent Combo

property sourcePort

sourcePort?: string;

边起始连接的 port
The Port of the source node

property startArrow

startArrow?: boolean;

是否显示边的起始箭头
Whether to display the start arrow of the edge

property startArrowOffset

startArrowOffset?: number;

起始箭头的偏移量
Offset of the start arrow

property targetNode

targetNode: ID;

边的终点 shape
The source shape. Represents the start of the edge

property targetPort

targetPort?: string;

边终点连接的 port
The Port of the target node

interface BaseLayoutOptions

interface BaseLayoutOptions
    extends AnimationOptions,
        WebWorkerLayoutOptions,
        Record<string, any> {}

property isLayoutInvisibleNodes

isLayoutInvisibleNodes?: boolean;

不可见节点是否参与布局
Whether invisible nodes participate in the layout
Remarks
当 preLayout 为 true 时生效
Takes effect when preLayout is true

property nodeFilter

nodeFilter?: (node: NodeData) => boolean;

参与该布局的节点
Nodes involved in the layout
Parameter node
节点数据 | node data
Returns
是否参与布局 | Whether to participate in the layout

property preLayout

preLayout?: boolean;

使用前布局，在初始化元素前计算布局
Use pre-layout to calculate the layout before initializing the elements
Remarks
不适用于流水线布局
Not applicable to pipeline layout

property type

type: string;

布局类型
Layout type

interface BaseNodeStyleProps

interface BaseNodeStyleProps
    extends BaseShapeStyleProps,
        Prefix<'label', NodeLabelStyleProps>,
        Prefix<'halo', BaseStyleProps>,
        Prefix<'icon', IconStyleProps>,
        Prefix<'badge', BadgeStyleProps>,
        Prefix<'port', PortStyleProps> {}

节点通用样式配置项
Base node style props

property badge

badge?: boolean;

是否显示节点徽标
Whether to show the node badge

property badgePalette

badgePalette?: CategoricalPalette;

徽标的背景色板
Badge background color palette

property badges

badges?: NodeBadgeStyleProps[];

徽标

Badge

Example 1

{
   badge: true,
   badges: [
     { text: 'A', placement: 'right-top'},
     { text: 'Important', placement: 'right' },
     { text: 'Notice', placement: 'right-bottom' },
   ],
   badgePalette: ['#7E92B5', '#F4664A', '#FFBE3A'],
}

property childrenData

childrenData?: NodeData[];

子节点数据
The data of the child node
Remarks
仅在树图中生效。如果当前节点为收起状态，children 可能为空，通过 childrenData 能够获取完整的子元素数据
Only valid in the tree graph. If the current node is collapsed, children may be empty, and the complete child element data can be obtained through childrenData

property childrenNode

childrenNode?: ID[];

子节点实例
The instance of the child node
Remarks
仅在树图中生效
Only valid in the tree graph

property collapsed

collapsed?: boolean;

当前节点/组合是否展开
Whether the current node/combo is expanded

property halo

halo?: boolean;

是否显示节点光晕
Whether to show the node halo

property icon

icon?: boolean;

是否显示节点图标
Whether to show the node icon

property label

label?: boolean;

是否显示节点标签
Whether to show the node label

property port

port?: boolean;

是否显示连接桩
Whether to show the node port

property ports

ports?: NodePortStyleProps[];

连接桩配置项，支持配置多个连接桩

Port configuration, supports configuring multiple ports

Example 1

{
   port: true,
   ports: [
     { key: 'top', placement: [0.5, 0], r: 4, stroke: '#31d0c6', fill: '#fff' },
     { key: 'bottom', placement: [0.5, 1], r: 4, stroke: '#31d0c6', fill: '#fff' },
   ],
}

property size

size?: Size;

节点大小，快捷设置节点宽高 - 若值为数字，则表示节点的宽度、高度以及深度相同为指定值 - 若值为数组，则按数组元素依次表示节点的宽度、高度以及深度
The size of node, which is a shortcut to set the width and height of node - If the value is a number, it means the width, height, and depth of the node are the same as the specified value - If the value is an array, it means the width, height, and depth of the node are represented by the array elements in turn

property x

x?: number;

x 坐标
The x-coordinate of node

property y

y?: number;

y 坐标
The y-coordinate of node

property z

z?: number;

z 坐标
The z-coordinate of node

interface BasePluginOptions

interface BasePluginOptions extends CustomPluginOption {}

interface BaseShapeStyleProps

interface BaseShapeStyleProps extends BaseStyleProps {}

interface BrushSelectOptions

interface BrushSelectOptions extends BaseBehaviorOptions {}

框选配置项
Brush select options

property animation

animation?: boolean;

是否启用动画
Whether to enable animation.

property enable

enable?: boolean | ((event: IPointerEvent) => boolean);

是否启用框选功能
Whether to enable Brush select element function.

property enableElements

enableElements?: ElementType[];

可框选的元素类型
Enable Elements type.

property immediately

immediately?: boolean;

是否及时框选, 仅在框选模式为 default 时生效
Whether to brush select immediately, only valid when the brush select mode is default

property mode

mode?: 'union' | 'intersect' | 'diff' | 'default';

框选的选择模式 - 'union'：保持已选元素的当前状态，并添加指定的 state 状态。 - 'intersect'：如果已选元素已有指定的 state 状态，则保留；否则清除该状态。 - 'diff'：对已选元素的指定 state 状态进行取反操作。 - 'default'：清除已选元素的当前状态，并添加指定的 state 状态。
Brush select mode - 'union': Keep the current state of the selected elements and add the specified state. - 'intersect': If the selected elements already have the specified state, keep it; otherwise, clearBrush it. - 'diff': Perform a negation operation on the specified state of the selected elements. - 'default': Clear the current state of the selected elements and add the specified state.

property onSelect

onSelect?: (states: Record<ID, State | State[]>) => Record<ID, State | State[]>;

框选元素状态回调。
Callback when brush select elements.
Parameter states
选中的元素状态
Returns
选中的元素状态

property state

state?: State;

被选中时切换到该状态
The state to switch to when selected.

property style

style?: RectStyleProps;

框选框样式
Timely screening.

property trigger

trigger?: ShortcutKey;

按下该快捷键配合鼠标点击进行框选
Press this shortcut key to apply brush select with mouse click.
Remarks
注意，trigger 设置为 ['drag'] 时会导致 drag-canvas 行为失效。两者不可同时配置。
Note that setting trigger to ['drag'] will cause the drag-canvas behavior to fail. The two cannot be configured at the same time.

interface BubbleSetsOptions

interface BubbleSetsOptions
    extends BasePluginOptions,
        IBubbleSetOptions,
        ContourStyleProps {}

气泡集配置项
BubbleSets options

property avoidMembers

avoidMembers?: ID[];

需要避开的元素，在绘制轮廓时不会包含这些元素。目前支持设置节点
Elements to avoid, these elements will not be included when drawing the contour, currently only nodes are supported

property members

members: ID[];

成员元素，包括节点和边
Member elements, including nodes and edges

interface CameraSettingOptions

interface CameraSettingOptions extends BasePluginOptions {}

property aspect

aspect?: number | 'auto';

相机视口宽高比，仅在透视相机下有效 - number : 具体的宽高比 - 'auto' : 自动设置为画布的宽高比
Camera viewport aspect ratio, only valid in perspective camera. - number : Specific aspect ratio - 'auto' : Automatically set to the aspect ratio of the canvas

property azimuth

azimuth?: number;

方位角
Azimuth

property cameraType

cameraType?: 'orbiting' | 'exploring' | 'tracking';

相机类型 - 'orbiting': 固定视点，改变相机位置 - 'exploring': 类似 orbiting，但允许相机在北极和南极之间旋转 - 'tracking': 固定相机位置，改变视点
Camera type - 'orbiting': Fixed viewpoint, change camera position - 'exploring': Similar to orbiting, but allows the camera to rotate between the North Pole and the South Pole - 'tracking': Fixed camera position, change viewpoint

property distance

distance?: number;

相机距离目标的距离
The distance from the camera to the target

property elevation

elevation?: number;

仰角
Elevation

property far

far?: number;

远平面位置
The position of the far plane

property fov

fov?: number;

相机视角，仅在透视相机下有效
Camera field of view, only valid in perspective camera

property maxDistance

maxDistance?: number;

最大视距
Maximum distance

property minDistance

minDistance?: number;

最小视距
Minimum distance

property near

near?: number;

近平面位置
The position of the near plane

property projectionMode

projectionMode?: 'perspective' | 'orthographic';

投影模式，透视投影仅在 3D 场景下有效 - 'perspective' : 透视投影 - 'orthographic' : 正交投影
Projection mode, perspective projection is only valid in 3D scenes - 'perspective' : perspective projection - 'orthographic' : Orthogonal projection

property roll

roll?: number;

滚转角
Roll

interface CanvasConfig

interface CanvasConfig
    extends Pick<
        GCanvasConfig,
        | 'container'
        | 'devicePixelRatio'
        | 'width'
        | 'height'
        | 'cursor'
        | 'background'
    > {}

property enableMultiLayer

enableMultiLayer?: boolean;

是否启用多图层
Whether to enable multiple layers
Remarks
非动态参数，仅在初始化时生效
Non-dynamic parameters, only take effect during initialization

property renderer

renderer?: CanvasOptions['renderer'];

渲染器
renderer

interface CanvasOptions

interface CanvasOptions {}

画布配置项
Canvas spec
Modifiers
- @public

property autoResize

autoResize?: boolean;

是否自动调整画布大小
whether to auto resize canvas
Remarks
基于 window.onresize 事件自动调整画布大小
Automatically adjust the canvas size based on the window.onresize event

property background

background?: string;

画布背景色
canvas background color
Remarks
该颜色作为导出图片时的背景色
This color is used as the background color when exporting images

property canvas

canvas?: CanvasConfig;

画布配置
canvas config
Remarks
GraphOptions 下相关配置项为快捷配置项，会被转换为 canvas 配置项
The related configuration items under GraphOptions are shortcut configuration items, which will be converted to canvas configuration items

property container

container?: string | HTMLElement | Canvas;

画布容器
canvas container

property cursor

cursor?: Cursor;

指针样式
cursor style

property devicePixelRatio

devicePixelRatio?: number;

设备像素比
device pixel ratio
Remarks
用于高清屏的设备像素比，默认为 [window.devicePixelRatio](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio)
Device pixel ratio for high-definition screens, default is [window.devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio)

property height

height?: number;

画布高度
canvas height
Remarks
如果未设置，则会自动获取容器高度
If not set, the container height will be automatically obtained

property renderer

renderer?: (layer: 'background' | 'main' | 'label' | 'transient') => IRenderer;

手动置顶渲染器
manually set renderer
Remarks
G6 采用了分层渲染的方式，分为 background、main、label、transient 四层，用户可以通过该配置项分别设置每层画布的渲染器
G6 adopts a layered rendering method, divided into four layers: background, main, label, transient. Users can set the renderer of each layer canvas separately through this configuration item

property width

width?: number;

画布宽度
canvas width
Remarks
如果未设置，则会自动获取容器宽度
If not set, the container width will be automatically obtained

interface CircleComboStyleProps

interface CircleComboStyleProps extends BaseComboStyleProps {}

圆形组合样式配置项
Circle combo style props

interface CircleStyleProps

interface CircleStyleProps extends BaseNodeStyleProps {}

圆形节点样式配置项
Circle node style props

interface ClickSelectOptions

interface ClickSelectOptions extends BaseBehaviorOptions {}

点击元素交互配置项
Click element behavior options

property animation

animation?: boolean;

是否启用动画
Whether to enable animation

property degree

degree?: number | ((event: IPointerEvent) => number);

选中元素的度，即决定了影响范围
The degree to determine the scope of influence
Remarks
对于节点来说，0 表示只选中当前节点，1 表示选中当前节点及其直接相邻的节点和边，以此类推。
对于边来说，0 表示只选中当前边，1 表示选中当前边及其直接相邻的节点，以此类推。
For nodes, 0 means only the current node is selected, 1 means the current node and its directly adjacent nodes and edges are selected, etc.
For edges, 0 means only the current edge is selected,1 means the current edge and its directly adjacent nodes are selected, etc.

property enable

enable?: boolean | ((event: IPointerEvent) => boolean);

是否启用点击元素的功能
Whether to enable the function of clicking the element
Remarks
可以通过函数的方式动态控制是否启用，例如只有节点被选中时才启用。
Whether to enable can be dynamically controlled by functions, such as only when nodes are selected.
{ enable: event => event.targetType === 'node'}

property multiple

multiple?: boolean;

是否允许多选
Whether to allow multiple selection

property neighborState

neighborState?: State;

当有元素选中时，其相邻 n 度关系的元素应用的状态。n 的值由属性 degree 控制，例如 degree 为 1 时表示直接相邻的元素
The state to be applied to the neighboring elements within n degrees when an element is selected. The value of n is controlled by the degree property, for instance, a degree of 1 indicates direct neighbors

property onClick

onClick?: (event: IPointerEvent) => void;

点击元素时的回调
Callback when the element is clicked
Parameter event
点击事件 | click event

property state

state?: State;

当元素被选中时应用的状态
The state to be applied when an element is selected

property trigger

trigger?: ShortcutKey;

按下该快捷键配合鼠标点击进行多选
Press this shortcut key to apply multiple selection with mouse click

property unselectedState

unselectedState?: State;

当有元素被选中时，除了选中元素及其受影响的邻居元素外，其他所有元素应用的状态。
The state to be applied to all unselected elements when some elements are selected, excluding the selected element and its affected neighbors

interface CollapsedMarkerStyleProps

interface CollapsedMarkerStyleProps extends IconStyleProps {}

组合收起时显示的标记样式配置项
Style properties of the marker displayed when the combo is collapsed

property type

type?:
    | 'child-count'
    | 'descendant-count'
    | 'node-count'
    | ((children: NodeLikeData[]) => string);

组合收起时显示的标记类型 - 'child-count': 子元素数量（包括 Node 和 Combo） - 'descendant-count': 后代元素数量（包括 Node 和 Combo） - 'node-count': 后代元素数量（只包括 Node） - (children: NodeLikeData[]) => string: 自定义处理逻辑
The type of marker displayed when the combo is collapsed - 'child-count': Number of child elements (including Nodes and Combos) - 'descendant-count': Number of descendant elements (including Nodes and Combos) - 'node-count': Number of descendant elements (only Nodes) - (children: NodeLikeData[]) => string: Custom processing logic

interface CollapseExpandNodeOptions

interface CollapseExpandNodeOptions {}

展开/收起节点选项
Expand / collapse node options

property align

align?: boolean;

保证展开/收起的节点位置不变
Ensure that the position of the expanded/collapsed node remains unchanged

property animation

animation?: boolean;

是否使用动画
Whether to use animation

interface CollapseExpandOptions

interface CollapseExpandOptions extends BaseBehaviorOptions {}

展开/收起元素交互配置项
Collapse/Expand combo behavior options

property align

align?: boolean;

是否对准目标元素，避免视图偏移
Whether to focus on the target element to avoid view offset

property animation

animation?: boolean;

是否启用动画
Whether to enable animation

property enable

enable?: boolean | ((event: IPointerEvent) => boolean);

是否启用展开/收起功能
Whether to enable the expand/collapse function

property onCollapse

onCollapse?: (id: ID) => void;

完成收起时的回调
Callback when collapse is completed

property onExpand

onExpand?: (id: ID) => void;

完成展开时的回调
Callback when expand is completed

property trigger

trigger?: CommonEvent.CLICK | CommonEvent.DBLCLICK;

触发方式
Trigger method

interface Combo

interface Combo extends Node {}

组合类型
Combo type

method getComboPosition

getComboPosition: (attributes: Record<string, unknown>) => Point;

获取组合的位置
Get the position of the combo
Parameter attributes
组合属性 | combo attributes

interface ComboData

interface ComboData {}

组合数据
Combo data

property combo

combo?: ID | null;

所属组合 ID
ID of the combo to which the combo belongs

property data

data?: Record<string, unknown>;

Combo 数据
Combo data
Remarks
用于存储 Combo 的自定义数据，可以在样式映射中通过回调函数获取
Used to store custom data of the Combo, which can be obtained through callback functions in the style mapping

property id

id: ID;

Combo ID
Combo ID

property states

states?: State[];

组合初始状态
Initial state of the combo

property style

style?: ComboStyle;

Combo 样式
Combo style

property type

type?: string;

Combo 类型
Combo type

index signature

[key: string]: unknown;

interface ComboOptions

interface ComboOptions {}

Combo 配置项
Combo spec

property animation

animation?: false | Record<AnimationStage, false | string | AnimationOptions[]>;

组合动画
Combo animation

property palette

palette?: PaletteOptions;

色板
Palette

property state

state?: Record<
    string,
    | ComboStyle
    | ((this: Graph, data: ComboData) => ComboStyle)
    | {
          [K in keyof ComboStyle]:
              | ComboStyle[K]
              | ((this: Graph, data: ComboData) => ComboStyle[K]);
      }
>;

组合状态样式
Combo state style

property style

style?:
    | ComboStyle
    | ((this: Graph, data: ComboData) => ComboStyle)
    | {
          [K in keyof ComboStyle]:
              | ComboStyle[K]
              | ((this: Graph, data: ComboData) => ComboStyle[K]);
      };

组合样式
Combo style

property type

type?: string | ((this: Graph, datum: ComboData) => string);

组合类型
Combo type

interface Command

interface Command {}

单条历史记录命令
Single history record command

property animation

animation: boolean;

是否开启动画
Whether to enable animation

property current

current: CommandData;

当前数据
Current data

property original

original: CommandData;

原始数据
Original data

interface CommandData

interface CommandData {}

单条历史记录命令数据
Single history record command data

property add

add: GraphData;

新增的数据
Added data

property remove

remove: GraphData;

移除的数据
Removed data

property update

update: GraphData;

更新的数据
Updated data

interface ContextmenuOptions

interface ContextmenuOptions extends BasePluginOptions {}

上下文菜单配置项
Contextmenu options

property className

className?: string;

给菜单的 DOM 追加的类名
The class name appended to the menu DOM for custom styles

property enable

enable?: boolean | ((event: IElementEvent) => boolean);

是否可用，通过参数判断是否支持右键菜单，默认是全部可用
Whether the plugin is available, determine whether the right-click menu is supported through parameters, The default is all available

property getContent

getContent?: (
    event: IElementEvent
) => HTMLElement | string | Promise<HTMLElement | string>;

返回菜单的内容，支持 Promise 类型的返回值，也可以使用 getItems 进行快捷配置
Return the content of menu, support the Promise type return value, you can also use getItems for shortcut configuration

property getItems

getItems?: (event: IElementEvent) => Item[] | Promise<Item[]>;

返回菜单的项目列表，支持 Promise 类型的返回值。是 getContent 的快捷配置
Return the list of menu items, support the Promise type return value. It is a shortcut configuration of getContent

property loadingContent

loadingContent?: HTMLElement | string;

当 getContent 返回一个 Promise 时，使用的菜单内容
The menu content when loading is used when getContent returns a Promise

property offset

offset?: [number, number];

菜单显式 X、Y 方向的偏移量
The offset X, y direction of the menu

property onClick

onClick?: (value: string, target: HTMLElement, current: Element) => void;

当菜单被点击后，触发的回调方法
The callback method triggered when the menu is clicked

property trigger

trigger?: 'click' | 'contextmenu';

如何触发右键菜单 - 'click' : 点击触发 - 'contextmenu' : 右键触发
How to trigger the context menu - 'click' : Click trigger - 'contextmenu' : Right-click trigger

interface ContourLabelStyleProps

interface ContourLabelStyleProps extends LabelStyleProps {}

property autoRotate

autoRotate?: boolean;

标签是否跟随轮廓旋转，仅在 closeToPath 为 true 时生效
Whether the label rotates with the contour. Only effective when closeToPath is true

property closeToPath

closeToPath?: boolean;

标签是否贴合轮廓
Whether the label is close to the contour

property maxWidth

maxWidth?: number;

文本的最大宽度，超出会自动省略
The maximum width of the text, which will be automatically ellipsis if exceeded

property offsetX

offsetX?: number;

x 轴偏移量
Label x-axis offset

property offsetY

offsetY?: number;

y 轴偏移量
Label y-axis offset

property placement

placement?: CardinalPlacement | 'center';

标签位置
Label position

interface ContourStyleProps

interface ContourStyleProps
    extends PathStyleProps,
        Prefix<'label', ContourLabelStyleProps> {}

property label

label?: boolean;

是否显示标签
Whether to display the label

interface CreateEdgeOptions

interface CreateEdgeOptions extends BaseBehaviorOptions {}

创建边交互配置项
Create edge behavior options

property enable

enable?: boolean | ((event: IPointerEvent) => boolean);

是否启用创建边的功能
Whether to enable the function of creating edges

property onCreate

onCreate?: (edge: EdgeData) => EdgeData;

创建边回调，返回边数据
Callback when create edge, return EdgeData.

property onFinish

onFinish?: (edge: EdgeData) => void;

成功创建边回调
Callback when create is completed.

property style

style?: EdgeStyle;

新建边的样式配置
Style configs of the new edge

property trigger

trigger?: 'click' | 'drag';

交互配置点击或拖拽
trigger click or drag.

interface CubicHorizontalStyleProps

interface CubicHorizontalStyleProps extends BaseEdgeStyleProps {}

水平方向的三次贝塞尔曲线样式配置项
Cubic Bezier curve in horizontal direction style properties

property curveOffset

curveOffset?: number | [number, number];

控制点距离两端点连线的距离，可理解为控制边的弯曲程度
The distance of the control point from the line

property curvePosition

curvePosition?: number | [number, number];

控制点在两端点连线上的相对位置，范围为0-1
The relative position of the control point on the line, ranging from 0-1

interface CubicRadialStyleProps

interface CubicRadialStyleProps extends CubicStyleProps {}

径向贝塞尔曲线样式配置项
Radial cubic style props

interface CubicStyleProps

interface CubicStyleProps extends BaseEdgeStyleProps {}

三次贝塞尔曲线样式配置项
Cubic Bezier curve style properties

property controlPoints

controlPoints?: [Point, Point];

控制点数组，用于定义曲线的形状。如果不指定，将会通过 curveOffset 和 curvePosition 来计算控制点
Control points. Used to define the shape of the curve. If not specified, it will be calculated using curveOffset and curvePosition.

property curveOffset

curveOffset?: number | [number, number];

控制点距离两端点连线的距离，可理解为控制边的弯曲程度
The distance of the control point from the line

property curvePosition

curvePosition?: number | [number, number];

控制点在两端点连线上的相对位置，范围为0-1
The relative position of the control point on the line, ranging from 0-1

interface CubicVerticalStyleProps

interface CubicVerticalStyleProps extends BaseEdgeStyleProps {}

垂直方向的三次贝塞尔曲线样式配置项
Cubic Bezier curve style properties in vertical direction

property curveOffset

curveOffset?: number | [number, number];

控制点距离两端点连线的距离，可理解为控制边的弯曲程度
The distance of the control point from the line

property curvePosition

curvePosition?: number | [number, number];

控制点在两端点连线上的相对位置，范围为0-1
The relative position of the control point on the line, ranging from 0-1

interface CustomBehaviorOption

interface CustomBehaviorOption extends Record<string, any> {}

property key

key?: string;

交互 key，即唯一标识
Behavior key, that is, the unique identifier
Remarks
用于标识交互，从而进一步操作此交互
Used to identify the behavior for further operations
// Update behavior options graph.updateBehavior({key: 'key', ...});

property type

type: string;

交互类型
Behavior type

interface CustomPluginOption

interface CustomPluginOption extends Record<string, any> {}

property key

key?: string;

插件 key，即唯一标识
Plugin key, that is, the unique identifier
Remarks
用于标识插件，从而进一步操作此插件
Used to identify the plugin for further operations
// Get plugin instance const plugin = graph.getPluginInstance('key'); // Update plugin options graph.updatePlugin({key: 'key', ...});

property type

type: string;

插件类型
Plugin type

interface DataURLOptions

interface DataURLOptions {}

property encoderOptions

encoderOptions: number;

图片质量, 仅对 image/jpeg 和 image/webp 有效，取值范围 0 ~ 1
image quality, only valid for image/jpeg and image/webp, range 0 ~ 1

property mode

mode?: 'viewport' | 'overall';

导出模式 - viewport: 导出视口内容 - overall: 导出整个画布
export mode - viewport: export the content of the viewport - overall: export the entire canvas

property type

type: 'image/png' | 'image/jpeg' | 'image/webp' | 'image/bmp';

图片类型
image type

interface DiamondStyleProps

interface DiamondStyleProps extends PolygonStyleProps {}

菱形节点样式配置项
Diamond node style props

interface DonutStyleProps

interface DonutStyleProps
    extends CircleStyleProps,
        Prefix<'donut', BaseStyleProps> {}

甜甜圈节点样式配置项
Donut node style props

property donutPalette

donutPalette?: string | CategoricalPalette;

颜色或者色板名
Color or palette.

property donuts

donuts?: number[] | DonutRound[];

圆环数据
Donut data.

property innerR

innerR?: string | number;

内环半径，使用百分比或者像素值
Inner ring radius, using percentage or pixel value.

interface DragCanvasOptions

interface DragCanvasOptions extends BaseBehaviorOptions {}

拖拽画布交互配置项
Drag canvas behavior options

property animation

animation?: ViewportAnimationEffectTiming;

是否启用拖拽动画，仅在使用按键移动时有效
Whether to enable the animation of dragging, only valid when using key movement

property direction

direction?: 'x' | 'y' | 'both';

允许拖拽方向 - 'x': 只允许水平拖拽 - 'y': 只允许垂直拖拽 - 'both': 不受限制，允许水平和垂直拖拽
Allowed drag direction - 'x': Only allow horizontal drag - 'y': Only allow vertical drag - 'both': Allow horizontal and vertical drag

property enable

enable?: boolean | ((event: IPointerEvent | IKeyboardEvent) => boolean);

是否启用拖拽画布的功能
Whether to enable the function of dragging the canvas

property onFinish

onFinish?: () => void;

完成拖拽时的回调
Callback when dragging is completed

property range

range?: number | number[];

可拖拽的视口范围，默认最多可拖拽一屏。可以分别设置上、右、下、左四个方向的范围，每个方向的范围在 [0, Infinity] 之间
The draggable viewport range allows you to drag up to one screen by default. You can set the range for each direction (top, right, bottom, left) individually, with each direction's range between [0, Infinity]

property sensitivity

sensitivity?: number;

触发一次按键移动的距离
The distance of a single key movement

property trigger

trigger?: {
    up: ShortcutKey;
    down: ShortcutKey;
    left: ShortcutKey;
    right: ShortcutKey;
};

触发拖拽的方式，默认使用指针按下拖拽
The way to trigger dragging, default to dragging with the pointer pressed

interface DragElementForceOptions

interface DragElementForceOptions
    extends Omit<DragElementOptions, 'animation' | 'dropEffect' | 'shadow'> {}

调用力导布局拖拽元素交互配置项
Call d3-force layout to drag element behavior options

property fixed

fixed?: boolean;

在拖拽结束后，节点是否保持固定位置 - true: 在拖拽结束后，节点的位置将保持固定，不受布局算法的影响 - false: 在拖拽结束后，节点的位置将继续受到布局算法的影响
Whether the node remains in a fixed position after dragging ends - true: After dragging ends, the node's position will remain fixed and will not be affected by the layout algorithm - false: After dragging ends, the node's position will continue to be affected by the layout algorithm

interface DragElementOptions

interface DragElementOptions
    extends BaseBehaviorOptions,
        Prefix<'shadow', BaseStyleProps> {}

拖拽元素交互配置项
Drag element behavior options

property animation

animation?: boolean;

是否启用拖拽动画
Whether to enable drag animation

property cursor

cursor?: {
    /**
     * <zh/> 默认指针样式
     *
     * <en/> Default cursor style
     */
    default?: Cursor;
    /**
     * <zh/> 可抓取指针样式
     *
     * <en/> Cursor style that can be grabbed
     */
    grab: Cursor;
    /**
     * <zh/> 抓取中指针样式
     *
     * <en/> Cursor style when grabbing
     */
    grabbing: Cursor;
};

指针样式
Cursor style

property dropEffect

dropEffect?: 'link' | 'move' | 'none';

拖拽操作效果 - 'link': 将拖拽元素置入为目标元素的子元素 - 'move': 移动元素并更新父元素尺寸 - 'none': 仅更新拖拽目标位置，不做任何额外操作
Drag operation effect - 'link': Place the drag element as a child element of the target element - 'move': Move the element and update the parent element size - 'none': Only update the drag target position, no additional operations
Remarks
combo 元素可作为元素容器置入 node 或 combo 元素
The combo element can be placed as an element container into the node or combo element

property enable

enable?: boolean | ((event: IElementDragEvent) => boolean);

是否启用拖拽节点的功能，默认可以拖拽 node 和 combo
Whether to enable the function of dragging the node，default can drag node and combo

property hideEdge

hideEdge?: 'none' | 'all' | EdgeDirection;

拖拽时隐藏的边 - 'none': 不隐藏 - 'out': 隐藏以节点为源节点的边 - 'in': 隐藏以节点为目标节点的边 - 'both': 隐藏与节点相关的所有边 - 'all': 隐藏图中所有边
Edges hidden during dragging - 'none': do not hide - 'out': hide the edges with the node as the source node - 'in': hide the edges with the node as the target node - 'both': hide all edges related to the node - 'all': hide all edges in the graph
Remarks
使用幽灵节点时不会隐藏边
Edges will not be hidden when using the drag shadow

property onFinish

onFinish?: (ids: ID[]) => void;

完成拖拽时的回调
Callback when dragging is completed

property shadow

shadow?: boolean;

是否启用幽灵节点，即用一个图形代替节点跟随鼠标移动
Whether to enable the drag shadow, that is, use a shape to replace the node to follow the mouse movement

property state

state?: State;

节点选中的状态，启用多选时会基于该状态查找选中的节点
The state name of the selected node, when multi-selection is enabled, the selected nodes will be found based on this state

interface Edge

interface Edge extends DisplayObject, ElementHooks, ElementMethods {}

边类型
Edge type

interface EdgeArrowStyleProps

interface EdgeArrowStyleProps
    extends PathStyleProps,
        Omit<ImageStyleProps, 'width' | 'height'>,
        Record<string, unknown> {}

边上箭头的样式配置项
Edge arrow style properties

property size

size?: Size;

箭头大小
Arrow size

property type

type?:
    | 'triangle'
    | 'circle'
    | 'diamond'
    | 'vee'
    | 'rect'
    | 'triangleRect'
    | 'simple'
    | ((width: number, height: number) => PathArray);

箭头类型
Arrow type

interface EdgeBundlingOptions

interface EdgeBundlingOptions extends BasePluginOptions {}

边绑定插件的配置项
Edge bundling options

property bundleThreshold

bundleThreshold?: number;

边兼容性阈值，决定了哪些边应该被绑定在一起
Edge compatibility threshold, which determines which edges should be bundled together

property cycles

cycles?: number;

模拟周期数
The number of simulation cycles

property divisions

divisions?: number;

初始切割点数。在后续的周期中，切割点数将根据 divRate 逐步递增
An initial number of subdivision points for each edge. In subsequent cycles, the number of subdivision points will increase gradually according to divRate

property divRate

divRate?: number;

切割点数增长率
The rate at which the number of subdivision points increases

property iterations

iterations?: number;

指定在第一个周期中执行的迭代次数。在后续的周期中，迭代次数将根据 iterRate 逐步递减
The number of iteration steps during the first cycle. In subsequent cycles, the number of iterations will decrease gradually according to iterRate

property iterRate

iterRate?: number;

迭代次数递减率
The rate at which the number of iterations decreases

property K

K?: number;

边的强度
The strength of the edge

property lambda

lambda?: number;

初始步长。在后续的周期中，步长将双倍递增
An initial step size. In subsequent cycles, the step size will double incrementally

interface EdgeData

interface EdgeData {}

边数据
Edge data

property data

data?: Record<string, unknown>;

边数据
Edge data
Remarks
用于存储边的自定义数据，可以在样式映射中通过回调函数获取
Used to store custom data of the edge, which can be obtained through callback functions in the style mapping

property id

id?: ID;

边 ID
Edge ID

property source

source: ID;

边起始节点 ID
Source node ID

property states

states?: State[];

边初始状态
Initial state of the edge

property style

style?: EdgeStyle;

边样式
Edge style

property target

target: ID;

边目标节点 ID
Target node ID

property type

type?: string;

边类型
Edge type

index signature

[key: string]: unknown;

interface EdgeFilterLensOptions

interface EdgeFilterLensOptions extends BasePluginOptions {}

边过滤镜插件配置项
Edge filter lens plugin options

property edgeStyle

edgeStyle?: EdgeStyle | ((datum: EdgeData) => EdgeStyle);

在透镜中边的样式
The style of the edges displayed in the lens

property filter

filter?: (id: ID, elementType: ElementType) => boolean;

过滤出始终不在透镜中显示的元素
Filter elements that are never displayed in the lens
Parameter id
元素的 id | The id of the element
Parameter elementType
元素的类型 | The type of the element
Returns
是否显示 | Whether to display

property maxR

maxR?: number;

透镜的最大半径。只有在 scaleRBy 为 wheel 时生效
The maximum radius of the lens. Only valid when scaleRBy is wheel

property minR

minR?: number;

透镜的最小半径。只有在 scaleRBy 为 wheel 时生效
The minimum radius of the lens. Only valid when scaleRBy is wheel

property nodeStyle

nodeStyle?: NodeStyle | ((datum: NodeData) => NodeStyle);

在透镜中节点的样式
The style of the nodes displayed in the lens

property nodeType

nodeType?: 'both' | 'source' | 'target' | 'either';

边显示的条件 - 'both'：只有起始节点和目标节点都在透镜中时，边才会显示 - 'source'：只有起始节点在透镜中时，边才会显示 - 'target'：只有目标节点在透镜中时，边才会显示 - 'either'：只要起始节点或目标节点有一个在透镜中时，边就会显示
The condition for displaying the edge - 'both': The edge is displayed only when both the source node and the target node are in the lens - 'source': The edge is displayed only when the source node is in the lens - 'target': The edge is displayed only when the target node is in the lens - 'either': The edge is displayed when either the source node or the target node is in the lens

property preventDefault

preventDefault?: boolean;

是否阻止默认事件
Whether to prevent the default event

property r

r?: number;

透镜的半径
The radius of the lens

property scaleRBy

scaleRBy?: 'wheel';

缩放透镜半径的方式 - 'wheel'：通过滚轮缩放透镜的半径
The way to scale the radius of the lens - 'wheel': scale the radius of the lens by the wheel

property style

style?: Partial<CircleStyleProps>;

透镜的样式
The style of the lens

property trigger

trigger?: 'pointermove' | 'click' | 'drag';

移动透镜的方式 - 'pointermove'：始终跟随鼠标移动 - 'click'：鼠标点击时透镜移动 - 'drag'：拖拽透镜
The way to move the lens - 'pointermove': always follow the mouse movement - 'click': move the lens when the mouse clicks - 'drag': drag the lens

interface EdgeLabelStyleProps

interface EdgeLabelStyleProps extends LabelStyleProps {}

边上标签样式配置项
Edge label style properties

property autoRotate

autoRotate?: boolean;

是否自动旋转，保持与边的方向一致
Indicates whether to automatically rotate the label to keep it consistent with the direction of the edge

property maxWidth

maxWidth?: string | number;

标签最大宽度（需要 [prefix]WordWrap 为 true） - string: 表示以相对于边长度的百分比形式定义最大宽度。例如 "50%" 表示标签宽度不超过边长度的一半 - number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素
The maximum width of the label(need [prefix]WordWrap to be true) - string: When set to a string, it defines the maximum width as a percentage of the edge length. For example, "50%" means the label width does not exceed half of the edge length - number: When set to a number, it defines the maximum width in pixels. For example, 100 means the maximum width of the label is 100 pixels

property offsetX

offsetX?: number;

标签平行于边的水平偏移量
The horizontal offset of the label parallel to the edge

property offsetY

offsetY?: number;

标签垂直于边的垂直偏移量
The vertical offset of the label perpendicular to the edge

property placement

placement?: 'start' | 'center' | 'end' | number;

标签相对于边的位置。取值范围为 'start'、'center'、'end' 或特定比率（数字 0-1）
Label position relative to the edge (keyShape) that can be 'start', 'center', 'end' or a specific ratio (number 0-1)

interface EdgeOptions

interface EdgeOptions {}

边配置项
Edge spec

property animation

animation?: false | Record<AnimationStage, false | string | AnimationOptions[]>;

边动画
Edge animation

property palette

palette?: PaletteOptions;

色板
Palette

property state

state?: Record<
    string,
    | EdgeStyle
    | ((this: Graph, data: EdgeData) => EdgeStyle)
    | {
          [K in keyof EdgeStyle]:
              | EdgeStyle[K]
              | ((this: Graph, data: EdgeData) => EdgeStyle[K]);
      }
>;

边状态样式
Edge state style

property style

style?:
    | EdgeStyle
    | ((this: Graph, data: EdgeData) => EdgeStyle)
    | {
          [K in keyof EdgeStyle]:
              | EdgeStyle[K]
              | ((this: Graph, data: EdgeData) => EdgeStyle[K]);
      };

边样式
Edge style

property type

type?: string | ((this: Graph, datum: EdgeData) => string);

边类型
Edge type

interface ElementHooks

interface ElementHooks {}

元素钩子方法
Element hooks

property onCreate

onCreate?: () => void;

在元素完成创建并执行完入场动画后调用
Called after the element is created and the entrance animation is completed
Modifiers
- @override

property onDestroy

onDestroy?: () => void;

在元素完成退场动画并销毁后调用
Called after the element completes the exit animation and is destroyed
Modifiers
- @override

property onUpdate

onUpdate?: () => void;

在元素更新并执行完过渡动画后调用
Called after the element is updated and the transition animation is completed
Modifiers
- @override

interface ElementMethods

interface ElementMethods {}

元素方法
Element methods

method getShape

getShape: <T extends DisplayObject = DisplayObject>(shapeID: string) => T;

获取当前元素内的子图形
Get the subgraph in the current element
Parameter shapeID
子图形 ID | Subgraph ID
Returns
子图形 | Subgraph

method update

update: (attr: any) => void;

更新元素属性
Update element attributes
Parameter attr
属性 | Attributes

interface EllipseStyleProps

interface EllipseStyleProps extends BaseNodeStyleProps {}

椭圆节点样式配置项
Ellipse node style props

interface FishboneLayoutOptions

interface FishboneLayoutOptions extends BaseLayoutOptions {}

property direction

direction?: 'RL' | 'LR';

排布方向 - 'RL' 从右到左，鱼头在右 - 'LR' 从左到右，鱼头在左
Layout direction - 'RL' From right to left, the fish head is on the right - 'LR' From left to right, the fish head is on the left

property getRibSep

getRibSep?: (node: NodeData) => number;

获取鱼骨间距
Get rib separation

property height

height?: number;

布局高度
Layout height

property hGap

hGap?: number;

获取水平间距
Get horizontal spacing

property nodeSize

nodeSize?: Size | ((node: NodeData) => Size);

节点大小
Node size

property vGap

vGap?: number;

获取垂直间距
Get vertical spacing

property width

width?: number;

布局宽度
Layout width

interface FisheyeOptions

interface FisheyeOptions extends BasePluginOptions {}

鱼眼放大镜插件配置项
Fisheye Plugin Options

property d

d?: number;

畸变因子
Distortion factor
Remarks

property maxD

maxD?: number;

鱼眼放大镜可调整的最大畸变因子，配合 scaleDBy 使用
The maximum distortion factor that the fisheye lens can be adjusted, used with scaleDBy

property maxR

maxR?: number;

鱼眼放大镜可调整的最大半径，配合 scaleRBy 使用
The maximum radius that the fisheye lens can be adjusted, used with scaleRBy

property minD

minD?: number;

鱼眼放大镜可调整的最小畸变因子，配合 scaleDBy 使用
The minimum distortion factor that the fisheye lens can be adjusted, used with scaleDBy

property minR

minR?: number;

鱼眼放大镜可调整的最小半径，配合 scaleRBy 使用
The minimum radius that the fisheye lens can be adjusted, used with scaleRBy

property nodeStyle

nodeStyle?: NodeStyle | ((datum: NodeData) => NodeStyle);

在鱼眼放大镜中的节点样式
Node style in the fisheye lens

property preventDefault

preventDefault?: boolean;

是否阻止默认事件
Whether to prevent the default event

property r

r?: number;

鱼眼放大镜半径
The radius of the fisheye lens
Remarks

property scaleDBy

scaleDBy?: 'wheel' | 'drag';

调整鱼眼放大镜畸变因子的方式 - 'wheel'：滚轮调整 - 'drag'：拖拽调整
The way to adjust the distortion factor of the fisheye lens - 'wheel': adjust by wheel - 'drag': adjust by drag

property scaleRBy

scaleRBy?: 'wheel' | 'drag';

调整鱼眼放大镜范围半径的方式 - 'wheel'：滚轮调整 - 'drag'：拖拽调整
The way to adjust the range radius of the fisheye lens - 'wheel': adjust by wheel - 'drag': adjust by drag
Remarks
如果 trigger、scaleRBy 和 scaleDBy 同时设置为 'drag'，优先级顺序为 trigger > scaleRBy > scaleDBy，只会为优先级最高的配置项绑定拖拽事件。同理，如果 scaleRBy 和 scaleDBy 同时设置为 'wheel'，只会为 scaleRBy 绑定滚轮事件
If trigger, scaleRBy, and scaleDBy are set to 'drag' at the same time, the priority order is trigger > scaleRBy > scaleDBy, and only the configuration item with the highest priority will be bound to the drag event. Similarly, if scaleRBy and scaleDBy are set to 'wheel' at the same time, only scaleRBy will be bound to the wheel event

property showDPercent

showDPercent?: boolean;

是否在鱼眼放大镜中显示畸变因子数值
Whether to display the value of the distortion factor in the fisheye lens

property style

style?: Partial<CircleStyleProps>;

鱼眼放大镜样式
Fisheye Lens Style

property trigger

trigger?: 'pointermove' | 'drag' | 'click';

移动鱼眼放大镜的方式 - 'pointermove'：始终跟随鼠标移动 - 'click'：鼠标点击时移动 - 'drag'：拖拽移动
The way to move the fisheye lens - 'pointermove': always follow the mouse movement - 'click': move when the mouse is clicked - 'drag': move by dragging

interface FitViewOptions

interface FitViewOptions {}

property direction

direction?: 'x' | 'y' | 'both';

仅对指定方向进行适配 - 'x' 仅适配 x 方向 - 'y' 仅适配 y 方向 - 'both' 适配 x 和 y 方向
Only adapt to the specified direction - 'x' Only adapt to the x direction - 'y' Only adapt to the y direction - 'both' Adapt to the x and y directions

property when

when?: 'overflow' | 'always';

在以下情况下进行适配 - 'overflow' 仅当图内容超出视口时进行适配 - 'always' 总是进行适配
Fit the view in the following cases - 'overflow' Only fit when the graph content exceeds the viewport - 'always' Always fit

interface FixElementSizeOptions

interface FixElementSizeOptions extends BaseBehaviorOptions {}

固定元素大小交互配置项
Fix element size behavior options

property combo

combo?: FixShapeConfig | FixShapeConfig[];

Combo 配置项，用于定义哪些属性在视觉上保持固定大小。默认整个 Combo 将被固定
Combo configuration for defining which combo attributes should remain fixed in size visually. By default, the entire combo will be fixed

property comboFilter

comboFilter?: (datum: ComboData) => boolean;

Combo 过滤器，用于过滤哪些 Combo 在缩放过程中保持固定大小
Combo filter for filtering which combos remain fixed in size during zooming

property edge

edge?: FixShapeConfig | FixShapeConfig[];

边配置项，用于定义哪些属性在视觉上保持固定大小。默认固定 lineWidth、labelFontSize 属性
Edge configuration for defining which edge attributes should remain fixed in size visually. By default, the lineWidth and labelFontSize attributes are fixed

property edgeFilter

edgeFilter?: (datum: EdgeData) => boolean;

边过滤器，用于过滤哪些边在缩放过程中保持固定大小
Edge filter for filtering which edges remain fixed in size during zooming

property enable

enable?: boolean | ((event: IViewportEvent) => boolean);

是否启用固定元素大小交互。默认在缩小画布时启用
Whether to enable the fix element size behavior. Enabled by default when zooming out
Remarks
默认在缩小画布时启用，设置 enable: (event) => event.data.scale < 1；如果希望在放大画布时启用，设置 enable: (event) => event.data.scale > 1；如果希望在放大缩小画布时都启用，设置 enable: true
Enabled by default when zooming out, set enable: (event) => event.data.scale < 1; If you want to enable it when zooming in, set enable: (event) => event.data.scale > 1; If you want to enable it when zooming in and out, set enable: true

property node

node?: FixShapeConfig | FixShapeConfig[];

节点配置项，用于定义哪些属性在视觉上保持固定大小。若未指定（即为 undefined），则整个节点将被固定
Node configuration for defining which node attributes should remain fixed in size visually. If not specified (i.e., undefined), the entire node will be fixed in size.
Example 1
如果在缩放过程中希望固定节点主图形的 lineWidth，可以这样配置：
If you want to fix the lineWidth of the key shape of the node during zooming, you can configure it like this:
{ node: [{ shape: 'key', fields: ['lineWidth'] }] }
如果在缩放过程中想保持元素标签大小不变，可以这样配置：
If you want to keep the label size of the element unchanged during zooming, you can configure it like this:
{ shape: 'label' }

property nodeFilter

nodeFilter?: (datum: NodeData) => boolean;

节点过滤器，用于过滤哪些节点在缩放过程中保持固定大小
Node filter for filtering which nodes remain fixed in size during zooming

property reset

reset?: boolean;

元素重绘时是否还原样式
Whether to reset styles when elements are redrawn

property state

state?: State;

指定要固定大小的元素状态
Specify the state of elements to be fixed in size

interface FocusElementOptions

interface FocusElementOptions extends BaseBehaviorOptions {}

聚焦元素交互配置项
Focus element behavior options

property animation

animation?: ViewportAnimationEffectTiming;

是否启用动画以及动画配置
Whether to enable animation

property enable

enable?: boolean | ((event: IElementEvent) => boolean);

是否启用聚焦功能
Whether to enable the function of focusing on the element

interface FullscreenOptions

interface FullscreenOptions extends BasePluginOptions {}

全屏配置项
Full screen options

property autoFit

autoFit?: boolean;

是否自适应画布尺寸，全屏后画布尺寸会自动适应屏幕尺寸
Whether to adapt the canvas size

property onEnter

onEnter?: () => void;

进入全屏后的回调
Callback after entering full screen

property onExit

onExit?: () => void;

退出全屏后的回调
Callback after exiting full screen

property trigger

trigger?: {
    request?: ShortcutKey;
    exit?: ShortcutKey;
};

触发全屏的方式 - request : 请求全屏 - exit : 退出全屏
The way to trigger full screen - request: request full screen - exit: exit full screen

interface GraphData

interface GraphData {}

图数据
Graph data
Remarks
图数据（GraphData）是 Graph 接收的数据类型之一，包含节点、边、组合的集合。
一个图数据的示例如下：
Graph data is one of the data types received by Graph, which contains a collection of nodes, edges, and combos.
An example of a graph data is as follows:
{ "nodes": [ { "id": "node1", "combo": "combo-1", "style": { "x": 100, "y": 100 } }, { "id": "node2", "style": { "x": 200, "y": 200 } } ], "edges": [{ "source": "node1", "target": "node2" }], "combos": [{ "id": "combo-1", "style": { "x": 100, "y": 100 } }] }

property combos

combos?: ComboData[];

Combo 数据
combo data

property edges

edges?: EdgeData[];

边数据
edge data

property nodes

nodes?: NodeData[];

节点数据
node data

interface GraphOptions

interface GraphOptions extends CanvasOptions, ViewportOptions {}

Graph 配置项
Graph options
Remarks
Graph 的初始化通过 new 进行实例化，实例化时需要传入参数对象。目前所支持的参数如下：
The initialization of Graph is instantiated through new, and the parameter object needs to be passed in when instantiated. The currently supported parameters are as follows:
new G6.Graph(options: GraphOptions) => Graph

property animation

animation?: boolean | AnimationEffectTiming;

启用或关闭全局动画
Enable or disable global animation
Remarks
为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置
When it is an animation options, the animation will be enabled, and the animation configuration will be used as the basic configuration of the global animation

property behaviors

behaviors?: BehaviorOptions;

启用交互
Enable interactions
Remarks
- 概念：[核心概念 - 交互](/manual/core-concept/behavior)
- 内置交互: [交互](/api/behaviors/auto-adapt-label)
- 自定义交互: [自定义扩展 - 自定义交互](/manual/advanced/custom-behavior)
- Concept: [Concepts - Behavior](/en/manual/core-concept/behavior)
- Built-in behaviors: [Behavior](/en/api/behaviors/auto-adapt-label)
- Custom behaviors: [Custom Extension - Custom Behavior](/en/manual/advanced/custom-behavior)

property combo

combo?: ComboOptions;

组合配置项
Combo options
Remarks
详见 [Combo](/api/elements/combos/base-combo)
See [Combo](/en/api/elements/combos/base-combo)

property data

data?: GraphData;

数据
Data
Remarks
详见 [Data](/api/data/graph-data)
See [Data](/en/api/data/graph-data)

property edge

edge?: EdgeOptions;

边配置项
Edge options
Remarks
详见 [Edge](/api/elements/edges/base-edge)
See [Edge](/en/api/elements/edges/base-edge)

property layout

layout?: LayoutOptions;

布局配置项
Layout options
Remarks
详见 [Layout](/api/layouts/antv-dagre-layout)
See [Layout](/en/api/layouts/antv-dagre-layout)

property node

node?: NodeOptions;

节点配置项
Node options
Remarks
详见 [Node](/api/elements/nodes/base-node)
See [Node](/en/api/elements/nodes/base-node)

property plugins

plugins?: PluginOptions;

启用插件
Enable plugins
Remarks
- 概念：[核心概念 - 插件](/manual/core-concept/plugin)
- 内置插件: [插件](/en/api/plugins/background)
- 自定义插件: [自定义扩展 - 自定义插件](/manual/advanced/custom-plugin)
- Concept: [Concepts - Plugin](/en/manual/core-concept/plugin)
- Built-in plugins: [Plugin](/en/api/plugins/background)
- Custom plugins: [Custom Extension - Custom Plugin](/en/manual/advanced/custom-plugin)

property theme

theme?: ThemeOptions;

主题
Theme

property transforms

transforms?: TransformOptions;

数据转换器
Data transforms

interface GridLineOptions

interface GridLineOptions extends BasePluginOptions {}

网格线配置项
Grid line options

property border

border?: boolean;

是否显示边框
Whether to show the border

property borderLineWidth

borderLineWidth?: number;

边框线宽
Border line width

property borderStroke

borderStroke?: string;

边框颜色
Border color
Remarks
完整属性定义参考 [CSS border-color](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-color)
Refer to [CSS border-color](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) for the complete property definition

property borderStyle

borderStyle?: string;

边框样式
Border style
Remarks
完整属性定义参考 [CSS border-style](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-style)
Refer to [CSS border-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) for the complete property definition

property follow

follow?:
    | boolean
    | {
          /**
           * <zh/> 是否跟随图平移
           *
           * <en/> Whether to follow the graph translation
           */
          translate?: boolean;
          /**
           * <zh/> 是否跟随图缩放
           *
           * <en/> Whether to follow the graph zoom
           */
          zoom?: boolean;
      };

是否跟随图移动
Whether to follow with the graph

property lineWidth

lineWidth?: number | string;

网格线宽
Grid line width

property size

size?: number;

单个网格的大小
The size of a single grid

property stroke

stroke?: string;

网格线颜色
Grid line color

interface HexagonStyleProps

interface HexagonStyleProps extends PolygonStyleProps {}

六边形节点样式配置项
Hexagon node style props

property outerR

outerR?: number;

外半径，默认为宽高的最小值的一半
outer radius, default is half of the minimum value of width and height

interface HistoryOptions

interface HistoryOptions extends BasePluginOptions {}

历史记录配置项
History options

property afterAddCommand

afterAddCommand?: (cmd: Command, revert: boolean) => void;

当一个命令被添加到 Undo/Redo 队列后被调用。revert 为 true 时表示撤销操作，为 false 时表示重做操作
Called after a command is added to the Undo/Redo queue. revert is true for undo operations and false for redo operations

property beforeAddCommand

beforeAddCommand?: (cmd: Command, revert: boolean) => boolean | void;

当一个命令被添加到 Undo/Redo 队列前被调用，如果该方法返回 false，那么这个命令将不会被添加到队列中。revert 为 true 时表示撤销操作，为 false 时表示重做操作
Called before a command is added to the Undo/Redo queue. If this method returns false, the command will not be added to the queue. revert is true for undo operations and false for redo operations

property executeCommand

executeCommand?: (cmd: Command) => void;

执行命令时的回调函数
Callback function when executing a command

property stackSize

stackSize?: number;

最多记录该数据长度的历史记录
The maximum number of history records

interface HoverActivateOptions

interface HoverActivateOptions extends BaseBehaviorOptions {}

悬浮元素交互配置项
Hover element behavior options

property animation

animation?: boolean;

是否启用动画
Whether to enable animation

property degree

degree?: number | ((event: IPointerEvent) => number);

激活元素的n度关系 - 默认为 0，表示只激活当前节点 - 1 表示激活当前节点及其直接相邻的节点和边，以此类推
N-degree relationship of the hovered element - default to 0, which means only the current node is activated - 1 means the current node and its directly adjacent nodes and edges are activated, etc

property direction

direction?: EdgeDirection;

指定边的方向 - 'both': 表示激活当前节点的所有关系 - 'in': 表示激活当前节点的入边和入节点 - 'out': 表示激活当前节点的出边和出节点
Specify the direction of the edge - 'both': Activate all relationships of the current node - 'in': Activate the incoming edges and nodes of the current node - 'out': Activate the outgoing edges and nodes of the current node

property enable

enable?: boolean | ((event: IPointerEvent) => boolean);

是否启用悬浮元素的功能
Whether to enable hover element function

property inactiveState

inactiveState?: State;

非激活元素的状态，默认为不改变
Inactive element state, default to no change

property onHover

onHover?: (event: IPointerEvent) => void;

当元素被悬停时的回调
Callback when the element is hovered

property onHoverEnd

onHoverEnd?: (event: IPointerEvent) => void;

当悬停结束时的回调
Callback when the hover ends

property state

state?: State;

激活元素的状态，默认为 active
Active element state, default toactive

interface HTMLStyleProps

interface HTMLStyleProps extends BaseNodeStyleProps {}

HTML 节点样式配置项
HTML node style props

property dx

dx?: number;

横行偏移量。HTML 容器默认以左上角为原点，通过 dx 来进行横向偏移
Horizontal offset. The HTML container defaults to the upper left corner as the origin, and the horizontal offset is performed through dx

property dy

dy?: number;

纵向偏移量。HTML 容器默认以左上角为原点，通过 dy 来进行纵向偏移
Vertical offset. The HTML container defaults to the upper left corner as the origin, and the vertical offset is performed through dy

property innerHTML

innerHTML: string | HTMLElement;

HTML 内容，可以为字符串或者 HTMLElement
HTML content, can be a string or HTMLElement

interface HullOptions

interface HullOptions extends BasePluginOptions, ContourStyleProps {}

Hull 配置项
Hull options

property concavity

concavity?: number;

凹度，数值越大凹度越小；默认为 Infinity 代表为 Convex Hull
Concavity. Default is Infinity, which means Convex Hull

property corner

corner?: 'rounded' | 'smooth' | 'sharp';

拐角类型
Corner type

property members

members?: ID[];

Hull 内的元素
Elements in Hull

property padding

padding?: number;

内边距
Padding

interface IAnimateEvent

interface IAnimateEvent extends NativeEvent {}

property animation

animation: IAnimation | null;

property animationType

animationType: AnimationType;

property data

data?: any;

interface IconStyleProps

interface IconStyleProps
    extends BaseShapeStyleProps,
        Partial<TextStyleProps>,
        Omit<ImageStyleProps, 'z'> {}

图标样式
Icon style

interface IDragEvent

interface IDragEvent<T extends Target = Target>
    extends TargetedEvent<FederatedPointerEvent, T> {}

property dx

dx: number;

property dy

dy: number;

interface IElementDragEvent

interface IElementDragEvent extends IDragEvent<Element> {}

interface IElementEvent

interface IElementEvent extends IPointerEvent<Element> {}

interface IElementLifeCycleEvent

interface IElementLifeCycleEvent extends NativeEvent {}

property data

data: ElementDatum;

property elementType

elementType: ElementType;

interface IGraphLifeCycleEvent

interface IGraphLifeCycleEvent extends NativeEvent {}

property data

data?: any;

interface IKeyboardEvent

interface IKeyboardEvent extends KeyboardEvent {}

interface ImageStyleProps

interface ImageStyleProps extends BaseNodeStyleProps {}

图片节点样式配置项
Image node style props

property img

img?: string | HTMLImageElement;

图片来源，即图片地址字符串
Image source, i.e. image address string

property src

src?: string | HTMLImageElement;

该属性为 img 的别名
This property is an alias for img

interface IPointerEvent

interface IPointerEvent<T extends Target = Target>
    extends TargetedEvent<FederatedPointerEvent, T> {}

interface IViewportEvent

interface IViewportEvent extends NativeEvent {}

property data

data: TransformOptions;

interface IWheelEvent

interface IWheelEvent<T extends Target = Target>
    extends TargetedEvent<FederatedWheelEvent, T> {}

interface LabelStyleProps

interface LabelStyleProps
    extends TextStyleProps,
        Prefix<'background', RectStyleProps> {}

标签样式
Label style

property background

background?: boolean;

是否显示背景
Whether to show background

property padding

padding?: Padding;

标签内边距
Label padding

interface LassoSelectOptions

interface LassoSelectOptions extends BrushSelectOptions {}

套索选择交互配置项
Lasso select behavior options

interface LegendOptions

interface LegendOptions
    extends BasePluginOptions,
        Omit<CategoryStyleProps, 'data'> {}

图例配置项
Legend options

property className

className?: string;

图例画布类名，传入外置容器时不生效
The class name of the legend canvas, which does not take effect when an external container is passed in

property comboField

comboField?: string | ((item: ElementDatum) => string);

组合分类标识
Combo Classification Identifier

property container

container?: HTMLElement | string;

图例挂载的容器，无则挂载到 Graph 所在容器
The container where the legend is mounted, if not, it will be mounted to the container where the Graph is located

property containerStyle

containerStyle?: Partial<CSSStyleDeclaration>;

图例的容器样式，传入外置容器时不生效
The style of the legend container, which does not take effect when an external container is passed in

property edgeField

edgeField?: string | ((item: ElementDatum) => string);

边分类标识
Edge Classification Identifier

property nodeField

nodeField?: string | ((item: ElementDatum) => string);

节点分类标识
Node Classification Identifier

property position

position?: CardinalPlacement;

图例在画布中的相对位置，默认为 'bottom'，代表在画布正下方
Relative position of the legend in the canvas, defaults to 'bottom', representing the bottom of the canvas

property trigger

trigger?: 'hover' | 'click';

图例触发行为 - 'hover'：鼠标移入图例项时触发 - 'click'：鼠标点击图例项时触发
Legend trigger behavior - 'hover'：mouseover the legend item - 'click'：click the legend item

interface LineStyleProps

interface LineStyleProps extends BaseEdgeStyleProps {}

直线样式配置项
Line style properties

interface LoopStyleProps

interface LoopStyleProps {}

自环样式配置项
Loop style properties

property clockwise

clockwise?: boolean;

指定是否顺时针绘制环
Specify whether to draw the loop clockwise

property dist

dist?: number;

从节点 keyShape 边缘到自环顶部的距离，用于指定自环的曲率，默认为宽度或高度的最大值
Determine the position from the edge of the node keyShape to the top of the self-loop, used to specify the curvature of the self-loop, the default value is the maximum of the width or height

property placement

placement?: LoopPlacement;

边的位置
The position of the edge

interface MapNodeSizeOptions

interface MapNodeSizeOptions extends BaseTransformOptions {}

property centrality

centrality?: NodeCentralityOptions | ((graphData: GraphData) => Map<ID, number>);

节点中心性的度量方法 - 'degree'：度中心性，通过节点的度数（连接的边的数量）来衡量其重要性。度中心性高的节点通常具有较多的直接连接，在网络中可能扮演着重要的角色 - 'betweenness'：介数中心性，通过节点在所有最短路径中出现的次数来衡量其重要性。介数中心性高的节点通常在网络中起到桥梁作用，控制着信息的流动 - 'closeness'：接近中心性，通过节点到其他所有节点的最短路径长度总和的倒数来衡量其重要性。接近中心性高的节点通常能够更快地到达网络中的其他节点 - 'eigenvector'：特征向量中心性，通过节点与其他中心节点的连接程度来衡量其重要性。特征向量中心性高的节点通常连接着其他重要节点 - 'pagerank'：PageRank 中心性，通过节点被其他节点引用的次数来衡量其重要性，常用于有向图。PageRank 中心性高的节点通常在网络中具有较高的影响力，类似于网页排名算法 - 自定义中心性计算方法：(graphData: GraphData) => Map<ID, number>，其中 graphData 为图数据，Map<ID, number> 为节点 ID 到中心性值的映射
The method of measuring the node centrality - 'degree': Degree centrality, measures centrality by the degree (number of connected edges) of a node. Nodes with high degree centrality usually have more direct connections and may play important roles in the network - 'betweenness': Betweenness centrality, measures centrality by the number of times a node appears in all shortest paths. Nodes with high betweenness centrality usually act as bridges in the network, controlling the flow of information - 'closeness': Closeness centrality, measures centrality by the reciprocal of the average shortest path length from a node to all other nodes. Nodes with high closeness centrality usually can reach other nodes in the network more quickly - 'eigenvector': Eigenvector centrality, measures centrality by the degree of connection between a node and other central nodes. Nodes with high eigenvector centrality usually connect to other important nodes - 'pagerank': PageRank centrality, measures centrality by the number of times a node is referenced by other nodes, commonly used in directed graphs. Nodes with high PageRank centrality usually have high influence in the network, similar to the page ranking algorithm - Custom centrality calculation method: (graphData: GraphData) => Map<ID, number>, where graphData is the graph data, and Map<ID, number> is the mapping from node ID to centrality value

property mapLabelSize

mapLabelSize?: boolean | [number, number];

是否同步调整标签大小
Whether to map label size synchronously

property maxSize

maxSize?: Size;

节点最大尺寸
The maximum size of the node

property minSize

minSize?: Size;

节点最小尺寸
The minimum size of the node

property scale

scale?:
    | 'linear'
    | 'log'
    | 'pow'
    | 'sqrt'
    | ((
          value: number,
          domain: [number, number],
          range: [number, number]
      ) => number);

插值函数，用于将节点中心性映射到节点大小 - 'linear'：线性插值函数，将一个值从一个范围线性映射到另一个范围，常用于处理中心性值的差异较小的情况 - 'log'：对数插值函数，将一个值从一个范围对数映射到另一个范围，常用于处理中心性值的差异较大的情况 - 'pow'：幂律插值函数，将一个值从一个范围幂律映射到另一个范围，常用于处理中心性值的差异较大的情况 - 'sqrt'：平方根插值函数，将一个值从一个范围平方根映射到另一个范围，常用于处理中心性值的差异较大的情况 - 自定义插值函数：(value: number, domain: [number, number], range: [number, number]) => number，其中 value 为需要映射的值，domain 为输入值的范围，range 为输出值的范围
Scale type - 'linear': Linear scale, maps a value from one range to another range linearly, commonly used for cases where the difference in centrality values is small - 'log': Logarithmic scale, maps a value from one range to another range logarithmically, commonly used for cases where the difference in centrality values is large - 'pow': Power-law scale, maps a value from one range to another range using power law, commonly used for cases where the difference in centrality values is large - 'sqrt': Square root scale, maps a value from one range to another range using square root, commonly used for cases where the difference in centrality values is large - Custom scale: (value: number, domain: [number, number], range: [number, number]) => number，where value is the value to be mapped, domain is the input range, and range is the output range

interface MinimapOptions

interface MinimapOptions extends BasePluginOptions {}

缩略图插件配置项
Minimap plugin options

property className

className?: string;

缩略图画布类名，传入外置容器时不生效
The class name of the minimap canvas, which does not take effect when an external container is passed in

property container

container?: HTMLElement | string;

缩略图挂载的容器，无则挂载到 Graph 所在容器
The container where the minimap is mounted, if not, it will be mounted to the container where the Graph is located

property containerStyle

containerStyle?: Partial<CSSStyleDeclaration>;

缩略图的容器样式，传入外置容器时不生效
The style of the minimap container, which does not take effect when an external container is passed in

property delay

delay?: number;

延迟更新时间(毫秒)，用于性能优化
Delay update time(ms), used for performance optimization

property filter

filter?: (id: string, elementType: ElementType) => boolean;

过滤器，用于过滤不必显示的元素
Filter, used to filter elements that do not need to be displayed
Parameter id
元素的 id | The id of the element
Parameter elementType
元素的类型 | The type of the element
Returns
是否显示 | Whether to display

property maskStyle

maskStyle?: Partial<CSSStyleDeclaration>;

遮罩的样式
The style of the mask

property padding

padding?: Padding;

内边距
Padding

property position

position?: Placement;

缩略图相对于画布的位置
The position of the minimap relative to the canvas

property renderer

renderer?: IRenderer;

渲染器，默认使用 Canvas 渲染器
Renderer, default to use Canvas renderer

property shape

shape?: 'key' | ((id: string, elementType: ElementType) => DisplayObject);

元素缩略图形的生成方法
The method of generating the thumbnail of the element
Remarks
- 'key' 使用元素的主图形作为缩略图形 - 也可以传入一个函数，接收元素的 id 和类型，返回一个图形
- 'key' uses the key shape of the element as the thumbnail shape - You can also pass in a function that receives the id and type of the element and returns a shape

property size

size?: [number, number];

宽度和高度
Width and height

interface Node

interface Node extends DisplayObject, ElementHooks, ElementMethods {}

节点类型
Node type

method getCenter

getCenter: () => Point;

获取节点中心位置
Get the center position of the node

method getIntersectPoint

getIntersectPoint: (point: Point, useExtendedLine?: boolean) => Point;

获取交点位置
Get the intersection point
Parameter point
外部位置 | external position
Parameter useExtendedLine
是否使用延长线 | whether to use the extended line
Returns
交点位置 | intersection point
Remarks
给定一个外部位置，返回当前节点与该位置的连边与节点的交点位置
Given an external position, return the intersection point of the edge between the current node and the position and the node

method getPorts

getPorts: () => Record<string, Port>;

获取连接桩
Get the ports

interface NodeBadgeStyleProps

interface NodeBadgeStyleProps extends BadgeStyleProps {}

节点徽标样式配置项
Node badge style props

property offsetX

offsetX?: number;

徽标在 x 轴方向上的偏移量
The offset of the badge in the x-axis direction

property offsetY

offsetY?: number;

徽标在 y 轴方向上的偏移量
The offset of the badge in the y-axis direction

property placement

placement?: CardinalPlacement | CornerPlacement;

徽标相对于节点（keyShape）的位置
Badge position relative to the node (keyShape)

interface NodeData

interface NodeData {}

节点数据
Node data

property children

children?: ID[];

子节点 ID
Child node ID
Remarks
适用于树图结构
Suitable for tree graph structure

property combo

combo?: ID | null;

所属组合 ID
ID of the combo to which the node belongs

property data

data?: Record<string, unknown>;

节点数据
Node data
Remarks
用于存储节点的自定义数据，可以在样式映射中通过回调函数获取
Used to store custom data of the node, which can be obtained through callback functions in the style mapping

property depth

depth?: number;

节点深度
Node depth
Remarks
适用于树图结构
Suitable for tree graph structure

property id

id: ID;

节点 ID
Node ID

property states

states?: State[];

节点初始状态
Initial state of the node

property style

style?: NodeStyle;

节点样式
Node style

property type

type?: string;

节点类型
Node type

index signature

[key: string]: unknown;

interface NodeLabelStyleProps

interface NodeLabelStyleProps extends LabelStyleProps {}

节点标签样式配置项
Node label style props

property maxWidth

maxWidth?: string | number;

标签最大宽度（需要 [prefix]WordWrap 为 true） - string: 表示以相对于节点宽度的百分比形式定义最大宽度。例如 "50%" 表示标签宽度不超过节点宽度的一半 - number: 表示以像素值为单位定义最大宽度。例如 100 表示标签的最大宽度为 100 像素
The maximum width of the label(need [prefix]WordWrap to be true) - string: When set to a string, it defines the maximum width as a percentage of the node width. For example, "50%" means the label width does not exceed half of the node width - number: When set to a number, it defines the maximum width in pixels. For example, 100 means the maximum width of the label is 100 pixels

property offsetX

offsetX?: number;

标签在 x 轴方向上的偏移量
The offset of the label in the x-axis direction

property offsetY

offsetY?: number;

标签在 y 轴方向上的偏移量
The offset of the label in the y-axis direction

property placement

placement?: DirectionalPlacement;

标签相对于节点（keyShape）的位置
Label position relative to the node (keyShape)

interface NodeOptions

interface NodeOptions {}

节点配置项
Node spec

property animation

animation?: false | Record<AnimationStage, false | string | AnimationOptions[]>;

节点动画
Node animation

property palette

palette?: PaletteOptions;

色板
Palette

property state

state?: Record<
    string,
    | NodeStyle
    | ((this: Graph, data: NodeData) => NodeStyle)
    | {
          [K in keyof NodeStyle]:
              | NodeStyle[K]
              | ((this: Graph, data: NodeData) => NodeStyle[K]);
      }
>;

节点状态样式
Node state style

property style

style?:
    | NodeStyle
    | ((this: Graph, data: NodeData) => NodeStyle)
    | {
          [K in keyof NodeStyle]:
              | NodeStyle[K]
              | ((this: Graph, data: NodeData) => NodeStyle[K]);
      };

节点样式
Node style

property type

type?: string | ((this: Graph, datum: NodeData) => string);

节点类型
Node type

interface NodePortStyleProps

interface NodePortStyleProps extends PortStyleProps {}

节点连接桩样式配置项
Node port style props

property key

key?: string;

连接桩的键值，默认为连接桩的索引
The key of the port. Default is the index of the port

property placement

placement: Placement;

连接桩相对于节点（keyShape）的位置。值可以是字符串或两个数字的元组。
The position of the port relative to the node (keyShape). The value can be a string or a tuple of two numbers. - If the value is a string, it will be treated as the position direction. - If the value is a tuple of two numbers, it will be treated as the position coordinates(0 ~ 1).

interface OptimizeViewportTransformOptions

interface OptimizeViewportTransformOptions extends BaseBehaviorOptions {}

画布优化交互配置项
Canvas optimization behavior options

property debounce

debounce?: number;

设置防抖时间
Set debounce time

property enable

enable?: boolean | ((event: IViewportEvent) => boolean);

是否启用画布优化功能
Whether to enable canvas optimization function

property shapes

shapes?:
    | {
          node?: string[];
          edge?: string[];
          combo?: string[];
      }
    | ((type: ElementType, shape: DisplayObject) => boolean);

指定始终显示的图形元素。应用此交互后，在画布操作过程中，只有通过该属性指定的图形元素会保持可见，其余图形元素将被隐藏，从而提升渲染性能。默认情况下，节点始终可见，而其他图形元素在操作画布过程中会自动隐藏
Specify the shapes that are always visible. After applying this interaction, only the shapes specified by this property will remain visible during the canvas operation, and the rest of the shapes will be hidden to improve rendering performance. By default, nodes are always visible, while other shapes are automatically hidden during canvas operations

interface PlaceRadialLabelsOptions

interface PlaceRadialLabelsOptions extends BaseTransformOptions {}

根据径向布局自动调整节点标签样式的配置项
Options for automatically adjusting the style of node labels according to the radial layout

property offset

offset?: number;

偏移量
Offset

interface PolygonStyleProps

interface PolygonStyleProps extends BaseNodeStyleProps {}

多边形节点样式配置项
Polygon node style props

interface PolylineStyleProps

interface PolylineStyleProps extends BaseEdgeStyleProps {}

折线样式配置项
Polyline style properties

property controlPoints

controlPoints?: Point[];

控制点数组
Control point array

property radius

radius?: number;

圆角半径
The radius of the rounded corner

property router

router?: PolylineRouter;

是否启用路由，默认开启且 controlPoints 会自动计入
Whether to enable routing, it is enabled by default and controlPoints will be automatically included

interface PortStyleProps

interface PortStyleProps extends Omit<CircleStyleProps, 'r'> {}

连接桩样式配置项
Port style props

property linkToCenter

linkToCenter?: boolean;

边是否连接到连接桩的中心 - 若为 true，则边连接到连接桩的中心 - 若为 false，则边连接到连接桩的边缘
Whether the edge is connected to the center of the port - If true, the edge is connected to the center of the port - If false, the edge is connected to the edge of the port

property r

r?: number;

连接桩半径 - 如果设置为 undefined，则连接桩被视为一个点，不在画布上显示但存在，边会优先连接到最近的连接桩 - 如果设置为数字，则连接桩被视为一个圆，圆的半径由此处指定
The radius of the port - If set to undefined, the port is treated as a point, not displayed on the canvas but exists, and the edge will be connected to the nearest port first - If set to a number, the port is treated as a circle, and the radius of the circle is specified here

interface ProcessParallelEdgesOptions

interface ProcessParallelEdgesOptions extends BaseTransformOptions {}

property distance

distance?: number;

边之间的距离，仅在捆绑模式下有效
The distance between edges, only valid for bundling mode

property edges

edges?: ID[];

考虑要处理的边，默认为全部边
The edges to be handled, all edges by default

property mode

mode: 'bundle' | 'merge';

处理模式 - 'merge': 将平行边合并为一条边，适用于不需要区分平行边的情况 - 'bundle': 每条边都会与其他所有平行边捆绑在一起，并通过改变曲率与其他边分开。如果一组平行边的数量是奇数，那么中心的边将被绘制为直线，其他的边将被绘制为曲线
Processing mode - 'merge': Merge parallel edges into one edge which is suitable for cases where parallel edges do not need to be distinguished - 'bundle': Each edge will be bundled with all other parallel edges and separated from them by varying the curvature. If the number of parallel edges in a group is odd, the central edge will be drawn as a straight line, and the others will be drawn as curves

property style

style?: PathStyleProps | ((prev: EdgeData[]) => PathStyleProps);

合并边的样式，仅在合并模式下有效
The style of the merged edge, only valid for merging mode

interface QuadraticStyleProps

interface QuadraticStyleProps extends BaseEdgeStyleProps {}

二次贝塞尔曲线样式配置项
Quadratic Bezier curve style properties

property controlPoint

controlPoint?: Point;

控制点，用于定义曲线的形状。如果不指定，将会通过curveOffset和curvePosition来计算控制点
Control point. Used to define the shape of the curve. If not specified, it will be calculated using curveOffset and curvePosition.

property curveOffset

curveOffset?: number;

控制点距离两端点连线的距离，可理解为控制边的弯曲程度
The distance of the control point from the line

property curvePosition

curvePosition?: number;

控制点在两端点连线上的相对位置，范围为0-1
The relative position of the control point on the line, ranging from 0-1

interface RectComboStyleProps

interface RectComboStyleProps extends BaseComboStyleProps {}

矩形组合样式配置项
Rect combo style props

interface RectStyleProps

interface RectStyleProps extends BaseNodeStyleProps {}

矩形节点样式配置项
Rect node style props

interface RuntimeContext

interface RuntimeContext {}

property animation

animation?: Animation;

元素动画执行器
Element animation executor

property batch

batch?: BatchController;

批量操作控制器
Batch operation controller

property behavior

behavior?: BehaviorController;

行为控制器
Behavior controller

property canvas

canvas: Canvas;

画布实例
Canvas instance

property element

element?: ElementController;

元素控制器
Element controller
Remarks
仅在绘制开始后才可用
Only available after drawing starts

property graph

graph: Graph;

图实例
Graph instance

property layout

layout?: LayoutController;

布局控制器
Layout controller

property model

model: DataController;

数据模型
Data model

property options

options: GraphOptions;

G6 配置项
G6 options

property plugin

plugin?: PluginController;

插件控制器
Plugin controller

property transform

transform: TransformController;

数据转换控制器
Data transform controller

property viewport

viewport?: ViewportController;

视口控制器
Viewport controller

interface ScrollCanvasOptions

interface ScrollCanvasOptions extends BaseBehaviorOptions {}

滚动画布交互配置项
Scroll canvas behavior options

property direction

direction?: 'x' | 'y';

允许的滚动方向 - 默认情况下没有限制 - 'x' : 只允许水平滚动 - 'y' : 只允许垂直滚动
The allowed rolling direction - by default, there is no restriction - 'x': only allow horizontal scrolling - 'y': only allow vertical scrolling

property enable

enable?: boolean | ((event: WheelEvent | IKeyboardEvent) => boolean);

是否启用滚动画布的功能
Whether to enable the function of scrolling the canvas

property onFinish

onFinish?: () => void;

完成滚动时的回调
Callback when scrolling is completed

property preventDefault

preventDefault?: boolean;

是否阻止默认事件
Whether to prevent the default event

property range

range?: number | number[];

可滚动的视口范围，默认最多可滚动一屏。可以分别设置上、右、下、左四个方向的范围，每个方向的范围在 [0, Infinity] 之间
The scrollable viewport range allows you to scroll up to one screen by default. You can set the range for each direction (top, right, bottom, left) individually, with each direction's range between [0, Infinity]

property sensitivity

sensitivity?: number;

滚动灵敏度
Scroll sensitivity

property trigger

trigger?: {
    up: ShortcutKey;
    down: ShortcutKey;
    left: ShortcutKey;
    right: ShortcutKey;
};

触发滚动的方式，默认使用指针滚动
The way to trigger scrolling, default to scrolling with the pointer pressed

interface SnakeLayoutOptions

interface SnakeLayoutOptions extends BaseLayoutOptions {}

property clockwise

clockwise?: boolean;

节点排布方向是否顺时针
Whether the node arrangement direction is clockwise
Remarks
在顺时针排布时，节点从左上角开始，第一行从左到右排列，第二行从右到左排列，依次类推，形成 S 型路径。在逆时针排布时，节点从右上角开始，第一行从右到左排列，第二行从左到右排列，依次类推，形成反向 S 型路径。
When arranged clockwise, the nodes start from the upper left corner, the first row is arranged from left to right, the second row is arranged from right to left, and so on, forming an S-shaped path. When arranged counterclockwise, the nodes start from the upper right corner, the first row is arranged from right to left, the second row is arranged from left to right, and so on, forming a reverse S-shaped path.

property colGap

colGap?: number;

节点列之间的间隙大小。默认将根据画布宽度和节点总列数自动计算
The size of the gap between a node's columns

property cols

cols?: number;

节点列数
Number of node columns

property nodeSize

nodeSize?: Size | ((node: NodeData) => Size);

节点尺寸
Node size

property padding

padding?: Padding;

内边距，即布局区域与画布边界的距离
Padding, the distance between the layout area and the canvas boundary

property rowGap

rowGap?: number;

节点行之间的间隙大小。默认将根据画布高度和节点总行数自动计算
The size of the gap between a node's rows

property sortBy

sortBy?: (nodeA: NodeData, nodeB: NodeData) => -1 | 0 | 1;

节点排序方法。默认按照在图中的路径顺序进行展示
Node sorting method

interface SnaplineOptions

interface SnaplineOptions extends BasePluginOptions {}

对齐线插件配置项
Snapline plugin options

property autoSnap

autoSnap?: boolean;

是否启用自动吸附
Whether to enable automatic adsorption

property filter

filter?: (node: Node) => boolean;

过滤器，用于过滤不需要作为参考的节点
Filter, used to filter nodes that do not need to be used as references

property horizontalLineStyle

horizontalLineStyle?: BaseStyleProps;

水平对齐线样式
Horizontal snapline style

property offset

offset?: number;

对齐线头尾的延伸距离。取值范围：[0, Infinity]
The extension distance of the snapline. The value range is [0, Infinity]

property shape

shape?: string | ((node: Node) => DisplayObject);

指定元素上的哪个图形作为参照图形
Specifies which shape on the element to use as the reference shape
Remarks
- 'key' 使用元素的主图形作为参照图形 - 也可以传入一个函数，接收元素对象，返回一个图形
- 'key' uses the key shape of the element as the reference shape - You can also pass in a function that receives the element and returns a shape

property tolerance

tolerance?: number;

对齐精度，即移动节点时与目标位置的距离小于 tolerance 时触发显示对齐线
The alignment accuracy, that is, when the distance between the moved node and the target position is less than tolerance, the alignment line is displayed

property verticalLineStyle

verticalLineStyle?: BaseStyleProps;

垂直对齐线样式
Vertical snapline style

interface StarStyleProps

interface StarStyleProps extends PolygonStyleProps {}

五角星节点样式配置项
Star node style props

property innerR

innerR?: number;

内半径，默认为外半径的 3/8
Inner radius, default is 3/8 of the outer radius

interface TimebarOptions

interface TimebarOptions extends BasePluginOptions {}

Timebar 时间条的配置项。 The options of the Timebar.

property className

className?: string;

给工具栏的 DOM 追加的类名，便于自定义样式
The class name appended to the menu DOM for custom styles

property data

data:
    | number[]
    | {
          time: number;
          value: number;
      }[];

时间数据
Time data
Remarks
timebarType 为 'chart' 时，需要额外传入 value 字段作为图表数据
When timebarType is 'chart', you need to pass in the value field as chart data

property elementTypes

elementTypes?: ElementType[];

筛选类型
Filter element types

property getTime

getTime?: (datum: ElementDatum) => number;

获取元素时间
Get element time

property height

height?: number;

时间条高度
Timebar height

property labelFormatter

labelFormatter?: (time: number | Date) => string;

图表模式下自定义时间格式化
Custom time formatting in chart mode

property loop

loop?: boolean;

是否循环播放
Whether to loop

property mode

mode?: 'modify' | 'visibility';

筛选模式 - 'modify': 通过修改图数据进行筛选 - 'visibility': 通过修改元素可见性进行筛选
Filter mode - 'modify': Filter by modifying the graph data. - 'visibility': Filter by modifying element visibility

property onBackward

onBackward?: () => void;

后退时执行的回调
Callback executed when backward

property onChange

onChange?: (values: number | [number, number]) => void;

时间区间变化时执行的回调
Callback executed when the time interval changes

property onForward

onForward?: () => void;

前进时执行的回调
Callback executed when forward

property onPause

onPause?: () => void;

暂停时执行的回调
Callback executed when paused

property onPlay

onPlay?: () => void;

开始播放时执行的回调
Callback executed when playback starts

property onReset

onReset?: () => void;

重置时执行的回调
Callback executed when reset

property onSpeedChange

onSpeedChange?: (speed: number) => void;

播放速度变化时执行的回调
Callback executed when the playback speed changes

property padding

padding?: Padding;

边距
Padding

property position

position?: 'bottom' | 'top';

Timebar 的位置
Timebar location

property timebarType

timebarType?: 'time' | 'chart';

Timebar 展示类型 - 'time': 显示为时间轴 - 'chart': 显示为趋势图
Timebar Displays the type - 'time': Display as a timeline - 'chart': Display as a trend chart

property values

values?: number | [number, number] | Date | [Date, Date];

当前时间值
Current time value

property width

width?: number;

时间条宽度
Timebar width

property x

x?: number;

X 位置
X position
Remarks
设置后 position 会失效
position will be invalidated after setting x

property y

y?: number;

Y 位置
Y position
Remarks
设置后 position 会失效
position will be invalidated after setting y

interface ToolbarOptions

interface ToolbarOptions extends BasePluginOptions {}

Toolbar 工具栏的配置项
The options of the Toolbar toolbar

property className

className?: string;

给工具栏的 DOM 追加的 classname，便于自定义样式。默认是包含 g6-toolbar
The classname appended to the menu DOM for custom styles. The default is g6-toolbar

property getItems

getItems: () => ToolbarItem[] | Promise<ToolbarItem[]>;

返回工具栏的项目列表，支持 Promise 类型的返回值
Return the list of toolbar items, support return a Promise as items

property onClick

onClick?: (value: string, target: Element) => void;

当工具栏被点击后，触发的回调方法
The callback method triggered when the toolbar item is clicked

property position

position?: CornerPlacement;

Toolbar 的位置，相对于画布，会影响 DOM 的 style 样式
The position of the Toolbar relative to the canvas, which will affect the style of the DOM

property style

style?: Partial<CSSStyleDeclaration>;

工具栏显式的 style 样式，可以用来设置它相对于画布的位置、背景容器样式等
The style style of the Toolbar, which can be used to set its position relative to the canvas

interface TooltipOptions

interface TooltipOptions
    extends BasePluginOptions,
        Pick<
            TooltipStyleProps,
            'position' | 'offset' | 'enterable' | 'style' | 'container' | 'title'
        > {}

提示框插件配置项
Tooltip plugin options

property enable

enable?: boolean | ((event: IElementEvent, items: ElementDatum[]) => boolean);

是否启用
Is enable

property getContent

getContent?: (
    event: IElementEvent,
    items: ElementDatum[]
) => Promise<HTMLElement | string>;

自定义内容
Function for getting tooltip content

property onOpenChange

onOpenChange: (open: boolean) => void;

显示隐藏的回调
Callback executed when visibility of the tooltip card is changed

property trigger

trigger?: 'hover' | 'click';

触发行为，可选 hover | click - 'hover'：鼠标移入元素时触发 - 'click'：鼠标点击元素时触发
Trigger behavior, optional hover | click - 'hover'：mouse hover element - 'click'：mouse click element

interface TransformOptions

interface TransformOptions {}

property mode

mode: 'relative' | 'absolute';

property origin

origin?: Point;

property rotate

rotate?: number;

property scale

scale?: number;

property translate

translate?: Point;

interface TriangleStyleProps

interface TriangleStyleProps extends PolygonStyleProps {}

三角形节点样式配置项
Triangle node style props

property direction

direction?: TriangleDirection;

三角形的方向
The direction of the triangle

interface UpsertHooks

interface UpsertHooks {}

图形 upsert 方法生命周期钩子
Shape upsert method lifecycle hooks

property afterCreate

afterCreate?: (instance: DisplayObject) => void;

图形创建后
After creating the shape
Parameter instance
图形实例 | shape instance

property afterDestroy

afterDestroy?: (instance: DisplayObject) => void;

图形销毁后
After destroying the shape
Parameter instance
图形实例 | shape instance

property afterUpdate

afterUpdate?: (instance: DisplayObject) => void;

图形更新后
After updating the shape
Parameter instance
图形实例 | shape instance

property beforeCreate

beforeCreate?: () => void;

图形创建前
Before creating the shape

property beforeDestroy

beforeDestroy?: (instance: DisplayObject) => void;

图形销毁前
Before destroying the shape
Parameter instance
图形实例 | shape instance

property beforeUpdate

beforeUpdate?: (instance: DisplayObject) => void;

图形更新前
Before updating the shape
Parameter instance
图形实例 | shape instance

interface ViewportOptions

interface ViewportOptions {}

视口配置项
Viewport
Modifiers
- @public

property autoFit

autoFit?:
    | {
          type: 'view';
          options?: FitViewOptions;
          animation?: ViewportAnimationEffectTiming;
      }
    | {
          type: 'center';
          animation?: ViewportAnimationEffectTiming;
      }
    | 'view'
    | 'center';

是否自动适应
whether to auto fit
Remarks
每次执行 render 时，都会根据 autoFit 进行自适应
Every time render is executed, it will be adapted according to autoFit

property padding

padding?: Padding;

画布内边距
canvas padding
Remarks
通常在自适应时，会根据内边距进行适配
Usually, it will be adapted according to the padding when auto-fitting

property rotation

rotation?: number;

旋转角度
rotation angle

property x

x?: number;

视口 x 坐标
viewport x coordinate

property y

y?: number;

视口 y 坐标
viewport y coordinate

property zoom

zoom?: number;

缩放比例
zoom ratio

property zoomRange

zoomRange?: [number, number];

缩放范围
zoom range

interface WatermarkOptions

interface WatermarkOptions extends BasePluginOptions {}

水印配置项
Watermark options

property backgroundAttachment

backgroundAttachment?: string;

水印的背景定位行为
The background attachment of watermark

property backgroundBlendMode

backgroundBlendMode?: string;

水印的背景混合
The background blend of watermark

property backgroundClip

backgroundClip?: string;

水印的背景裁剪
The background clip of watermark

property backgroundColor

backgroundColor?: string;

水印的背景颜色
The background color of watermark

property backgroundImage

backgroundImage?: string;

水印的背景图片
The background image of watermark

property backgroundOrigin

backgroundOrigin?: string;

水印的背景原点
The background origin of watermark

property backgroundPosition

backgroundPosition?: string;

水印的背景位置
The background position of watermark

property backgroundPositionX

backgroundPositionX?: string;

水印的背景位置-x
The background position-x of watermark

property backgroundPositionY

backgroundPositionY?: string;

水印的背景位置-y
The background position-y of watermark

property backgroundRepeat

backgroundRepeat?: string;

水印的背景重复
The background repeat of watermark

property backgroundSize

backgroundSize?: string;

水印的背景大小
The background size of watermark

property height

height?: number;

水印的高度（单个）
The height of watermark(single)

property imageURL

imageURL?: string;

图片地址，如果有值，则使用，否则使用文本
The image url, if it has a value, it will be used, otherwise it will use the text

property opacity

opacity?: number;

水印的透明度
The opacity of watermark

property rotate

rotate?: number;

水印的旋转角度
The rotate angle of watermark

property text

text?: string;

水印文本
The text of watermark

property textAlign

textAlign?: 'center' | 'end' | 'left' | 'right' | 'start';

文本水印的文本对齐方式
The text align of text watermark

property textBaseline

textBaseline?:
    | 'alphabetic'
    | 'bottom'
    | 'hanging'
    | 'ideographic'
    | 'middle'
    | 'top';

文本水印的文本对齐基线
The text baseline of text watermark

property textFill

textFill?: string;

文本水印的文字颜色
The color of text watermark

property textFontFamily

textFontFamily?: string;

文本水印的文本字体
The font of text watermark

property textFontSize

textFontSize?: number;

文本水印的文本大小
The font size of text watermark

property textFontVariant

textFontVariant?: string;

文本水印的文本字体变体
The font variant of text watermark

property textFontWeight

textFontWeight?: string;

文本水印的文本字体粗细
The font weight of text watermark

property width

width?: number;

水印的宽度（单个）
The width of watermark(single)

interface WebWorkerLayoutOptions

interface WebWorkerLayoutOptions {}

property enableWorker

enableWorker?: boolean;

是否在 WebWorker 中运行布局
Whether to run the layout in WebWorker

property iterations

iterations?: number;

迭代布局的迭代次数
Iterations for iterable layouts

interface ZoomCanvasOptions

interface ZoomCanvasOptions extends BaseBehaviorOptions {}

缩放画布交互配置项
Zoom canvas behavior options

property animation

animation?: ViewportAnimationEffectTiming;

是否启用缩放动画
Whether to enable the animation of zooming

property enable

enable?:
    | boolean
    | ((event: IWheelEvent | IKeyboardEvent | IPointerEvent) => boolean);

是否启用缩放画布的功能
Whether to enable the function of zooming the canvas

property onFinish

onFinish?: () => void;

完成缩放时的回调
Callback when zooming is completed

property preventDefault

preventDefault?: boolean;

是否阻止默认事件
Whether to prevent the default event

property sensitivity

sensitivity?: number;

缩放灵敏度
Zoom sensitivity

property trigger

trigger?:
    | ShortcutKey
    | {
          zoomIn: ShortcutKey;
          zoomOut: ShortcutKey;
          reset: ShortcutKey;
      };

触发缩放的方式 - ShortcutKey：组合快捷键，**默认使用滚轮缩放**，['Control'] 表示按住 Control 键滚动鼠标滚轮时触发缩放 - CombinationKey：缩放快捷键，例如 { zoomIn: ['Control', '+'], zoomOut: ['Control', '-'], reset: ['Control', '0'] }
The way to trigger zoom - ShortcutKey: Combination shortcut key, **default to zoom with the mouse wheel**, ['Control'] means zooming when holding down the Control key and scrolling the mouse wheel - CombinationKey: Zoom shortcut key, such as { zoomIn: ['Control', '+'], zoomOut: ['Control', '-'], reset: ['Control', '0'] }

Enums

enum CanvasEvent

enum CanvasEvent {
    CLICK = 'canvas:click',
    DBLCLICK = 'canvas:dblclick',
    POINTER_OVER = 'canvas:pointerover',
    POINTER_LEAVE = 'canvas:pointerleave',
    POINTER_ENTER = 'canvas:pointerenter',
    POINTER_MOVE = 'canvas:pointermove',
    POINTER_OUT = 'canvas:pointerout',
    POINTER_DOWN = 'canvas:pointerdown',
    POINTER_UP = 'canvas:pointerup',
    CONTEXT_MENU = 'canvas:contextmenu',
    DRAG_START = 'canvas:dragstart',
    DRAG = 'canvas:drag',
    DRAG_END = 'canvas:dragend',
    DRAG_ENTER = 'canvas:dragenter',
    DRAG_OVER = 'canvas:dragover',
    DRAG_LEAVE = 'canvas:dragleave',
    DROP = 'canvas:drop',
    WHEEL = 'canvas:wheel',
}

画布事件
Canvas event

member CLICK

CLICK = 'canvas:click'

点击时触发
Triggered when click

member CONTEXT_MENU

CONTEXT_MENU = 'canvas:contextmenu'

打开上下文菜单时触发
Triggered when the context menu is opened

member DBLCLICK

DBLCLICK = 'canvas:dblclick'

双击时触发
Triggered when double click

member DRAG

DRAG = 'canvas:drag'

拖拽过程中触发
Triggered when dragging

member DRAG_END

DRAG_END = 'canvas:dragend'

拖拽结束时触发
Triggered when dragging ends

member DRAG_ENTER

DRAG_ENTER = 'canvas:dragenter'

拖拽进入时触发
Triggered when dragging enters

member DRAG_LEAVE

DRAG_LEAVE = 'canvas:dragleave'

拖拽离开时触发
Triggered when dragging leaves

member DRAG_OVER

DRAG_OVER = 'canvas:dragover'

拖拽经过时触发
Triggered when dragging passes

member DRAG_START

DRAG_START = 'canvas:dragstart'

开始拖拽时触发
Triggered when dragging starts

member DROP

DROP = 'canvas:drop'

拖拽放下时触发
Triggered when dragging is dropped

member POINTER_DOWN

POINTER_DOWN = 'canvas:pointerdown'

指针按下时触发
Triggered when the pointer is pressed

member POINTER_ENTER

POINTER_ENTER = 'canvas:pointerenter'

指针移入时或移入子元素时触发（不会冒泡）
Triggered when the pointer enters or enters a child element (does not bubble)

member POINTER_LEAVE

POINTER_LEAVE = 'canvas:pointerleave'

指针移出时触发
Triggered when the pointer leaves

member POINTER_MOVE

POINTER_MOVE = 'canvas:pointermove'

指针移动时触发
Triggered when the pointer moves

member POINTER_OUT

POINTER_OUT = 'canvas:pointerout'

指针移出时触发
Triggered when the pointer leaves

member POINTER_OVER

POINTER_OVER = 'canvas:pointerover'

指针移入时触发
Triggered when the pointer enters

member POINTER_UP

POINTER_UP = 'canvas:pointerup'

指针抬起时触发
Triggered when the pointer is lifted

member WHEEL

WHEEL = 'canvas:wheel'

滚动时触发
Triggered when scrolling

enum ComboEvent

enum ComboEvent {
    CLICK = 'combo:click',
    DBLCLICK = 'combo:dblclick',
    POINTER_OVER = 'combo:pointerover',
    POINTER_LEAVE = 'combo:pointerleave',
    POINTER_ENTER = 'combo:pointerenter',
    POINTER_MOVE = 'combo:pointermove',
    POINTER_OUT = 'combo:pointerout',
    POINTER_DOWN = 'combo:pointerdown',
    POINTER_UP = 'combo:pointerup',
    CONTEXT_MENU = 'combo:contextmenu',
    DRAG_START = 'combo:dragstart',
    DRAG = 'combo:drag',
    DRAG_END = 'combo:dragend',
    DRAG_ENTER = 'combo:dragenter',
    DRAG_OVER = 'combo:dragover',
    DRAG_LEAVE = 'combo:dragleave',
    DROP = 'combo:drop',
}

组合事件
Combo event

member CLICK

CLICK = 'combo:click'

点击时触发
Triggered when click

member CONTEXT_MENU

CONTEXT_MENU = 'combo:contextmenu'

打开上下文菜单时触发
Triggered when the context menu is opened

member DBLCLICK

DBLCLICK = 'combo:dblclick'

双击时触发
Triggered when double click

member DRAG

DRAG = 'combo:drag'

拖拽过程中触发
Triggered when dragging

member DRAG_END

DRAG_END = 'combo:dragend'

拖拽结束时触发
Triggered when dragging ends

member DRAG_ENTER

DRAG_ENTER = 'combo:dragenter'

拖拽进入时触发
Triggered when dragging enters

member DRAG_LEAVE

DRAG_LEAVE = 'combo:dragleave'

拖拽离开时触发
Triggered when dragging leaves

member DRAG_OVER

DRAG_OVER = 'combo:dragover'

拖拽经过时触发
Triggered when dragging passes

member DRAG_START

DRAG_START = 'combo:dragstart'

开始拖拽时触发
Triggered when dragging starts

member DROP

DROP = 'combo:drop'

拖拽放下时触发
Triggered when dragging is dropped

member POINTER_DOWN

POINTER_DOWN = 'combo:pointerdown'

指针按下时触发
Triggered when the pointer is pressed

member POINTER_ENTER

POINTER_ENTER = 'combo:pointerenter'

指针移入时或移入子元素时触发（不会冒泡）
Triggered when the pointer enters or enters a child element (does not bubble)

member POINTER_LEAVE

POINTER_LEAVE = 'combo:pointerleave'

指针移出时触发
Triggered when the pointer leaves

member POINTER_MOVE

POINTER_MOVE = 'combo:pointermove'

指针移动时触发
Triggered when the pointer moves

member POINTER_OUT

POINTER_OUT = 'combo:pointerout'

指针移出时触发
Triggered when the pointer leaves

member POINTER_OVER

POINTER_OVER = 'combo:pointerover'

指针移入时触发
Triggered when the pointer enters

member POINTER_UP

POINTER_UP = 'combo:pointerup'

指针抬起时触发
Triggered when the pointer is lifted

enum CommonEvent

enum CommonEvent {
    CLICK = 'click',
    DBLCLICK = 'dblclick',
    POINTER_OVER = 'pointerover',
    POINTER_LEAVE = 'pointerleave',
    POINTER_ENTER = 'pointerenter',
    POINTER_MOVE = 'pointermove',
    POINTER_OUT = 'pointerout',
    POINTER_DOWN = 'pointerdown',
    POINTER_UP = 'pointerup',
    CONTEXT_MENU = 'contextmenu',
    DRAG_START = 'dragstart',
    DRAG = 'drag',
    DRAG_END = 'dragend',
    DRAG_ENTER = 'dragenter',
    DRAG_OVER = 'dragover',
    DRAG_LEAVE = 'dragleave',
    DROP = 'drop',
    KEY_DOWN = 'keydown',
    KEY_UP = 'keyup',
    WHEEL = 'wheel',
    PINCH = 'pinch',
}

member CLICK

CLICK = 'click'

点击时触发
Triggered when click

member CONTEXT_MENU

CONTEXT_MENU = 'contextmenu'

打开上下文菜单时触发
Triggered when the context menu is opened

member DBLCLICK

DBLCLICK = 'dblclick'

双击时触发
Triggered when double click

member DRAG

DRAG = 'drag'

拖拽过程中触发
Triggered when dragging

member DRAG_END

DRAG_END = 'dragend'

拖拽结束时触发
Triggered when dragging ends

member DRAG_ENTER

DRAG_ENTER = 'dragenter'

拖拽进入时触发
Triggered when dragging enters

member DRAG_LEAVE

DRAG_LEAVE = 'dragleave'

拖拽离开时触发
Triggered when dragging leaves

member DRAG_OVER

DRAG_OVER = 'dragover'

拖拽经过时触发
Triggered when dragging passes

member DRAG_START

DRAG_START = 'dragstart'

开始拖拽时触发
Triggered when dragging starts

member DROP

DROP = 'drop'

拖拽放下时触发
Triggered when dragging is dropped

member KEY_DOWN

KEY_DOWN = 'keydown'

按下键盘时触发
Triggered when the keyboard is pressed

member KEY_UP

KEY_UP = 'keyup'

抬起键盘时触发
Triggered when the keyboard is lifted

member PINCH

PINCH = 'pinch'

双指捏拢或张开时触发
Triggered when pinch in and pinch out

member POINTER_DOWN

POINTER_DOWN = 'pointerdown'

指针按下时触发
Triggered when the pointer is pressed

member POINTER_ENTER

POINTER_ENTER = 'pointerenter'

指针移入时或移入子元素时触发（不会冒泡）
Triggered when the pointer enters or enters a child element (does not bubble)

member POINTER_LEAVE

POINTER_LEAVE = 'pointerleave'

指针移出时触发
Triggered when the pointer leaves

member POINTER_MOVE

POINTER_MOVE = 'pointermove'

指针移动时触发
Triggered when the pointer moves

member POINTER_OUT

POINTER_OUT = 'pointerout'

指针移出时触发
Triggered when the pointer leaves

member POINTER_OVER

POINTER_OVER = 'pointerover'

指针移入时触发
Triggered when the pointer enters

member POINTER_UP

POINTER_UP = 'pointerup'

指针抬起时触发
Triggered when the pointer is lifted

member WHEEL

WHEEL = 'wheel'

滚动时触发
Triggered when scrolling

enum ContainerEvent

enum ContainerEvent {
    KEY_DOWN = 'keydown',
    KEY_UP = 'keyup',
}

member KEY_DOWN

KEY_DOWN = 'keydown'

按下键盘时触发
Triggered when the keyboard is pressed

member KEY_UP

KEY_UP = 'keyup'

抬起键盘时触发
Triggered when the keyboard is lifted

enum EdgeEvent

enum EdgeEvent {
    CLICK = 'edge:click',
    DBLCLICK = 'edge:dblclick',
    POINTER_OVER = 'edge:pointerover',
    POINTER_LEAVE = 'edge:pointerleave',
    POINTER_ENTER = 'edge:pointerenter',
    POINTER_MOVE = 'edge:pointermove',
    POINTER_OUT = 'edge:pointerout',
    POINTER_DOWN = 'edge:pointerdown',
    POINTER_UP = 'edge:pointerup',
    CONTEXT_MENU = 'edge:contextmenu',
    DRAG_ENTER = 'edge:dragenter',
    DRAG_OVER = 'edge:dragover',
    DRAG_LEAVE = 'edge:dragleave',
    DROP = 'edge:drop',
}

边事件
Edge event

member CLICK

CLICK = 'edge:click'

点击时触发
Triggered when click

member CONTEXT_MENU

CONTEXT_MENU = 'edge:contextmenu'

打开上下文菜单时触发
Triggered when the context menu is opened

member DBLCLICK

DBLCLICK = 'edge:dblclick'

双击时触发
Triggered when double click

member DRAG_ENTER

DRAG_ENTER = 'edge:dragenter'

拖拽进入时触发
Triggered when dragging enters

member DRAG_LEAVE

DRAG_LEAVE = 'edge:dragleave'

拖拽离开时触发
Triggered when dragging leaves

member DRAG_OVER

DRAG_OVER = 'edge:dragover'

拖拽经过时触发
Triggered when dragging passes

member DROP

DROP = 'edge:drop'

拖拽放下时触发
Triggered when dragging is dropped

member POINTER_DOWN

POINTER_DOWN = 'edge:pointerdown'

指针按下时触发
Triggered when the pointer is pressed

member POINTER_ENTER

POINTER_ENTER = 'edge:pointerenter'

指针移入时或移入子元素时触发（不会冒泡）
Triggered when the pointer enters or enters a child element (does not bubble)

member POINTER_LEAVE

POINTER_LEAVE = 'edge:pointerleave'

指针移出时触发
Triggered when the pointer leaves

member POINTER_MOVE

POINTER_MOVE = 'edge:pointermove'

指针移动时触发
Triggered when the pointer moves

member POINTER_OUT

POINTER_OUT = 'edge:pointerout'

指针移出时触发
Triggered when the pointer leaves

member POINTER_OVER

POINTER_OVER = 'edge:pointerover'

指针移入时触发
Triggered when the pointer enters

member POINTER_UP

POINTER_UP = 'edge:pointerup'

指针抬起时触发
Triggered when the pointer is lifted

enum ExtensionCategory

enum ExtensionCategory {
    NODE = 'node',
    EDGE = 'edge',
    COMBO = 'combo',
    THEME = 'theme',
    PALETTE = 'palette',
    LAYOUT = 'layout',
    BEHAVIOR = 'behavior',
    PLUGIN = 'plugin',
    ANIMATION = 'animation',
    TRANSFORM = 'transform',
    SHAPE = 'shape',
}

member ANIMATION

ANIMATION = 'animation'

动画
Animation

member BEHAVIOR

BEHAVIOR = 'behavior'

交互
Behavior

member COMBO

COMBO = 'combo'

组合元素
Combination element

member EDGE

EDGE = 'edge'

边元素
Edge element

member LAYOUT

LAYOUT = 'layout'

布局
Layout

member NODE

NODE = 'node'

节点元素
Node element

member PALETTE

PALETTE = 'palette'

色板
Palette

member PLUGIN

PLUGIN = 'plugin'

插件
Plugin

member SHAPE

SHAPE = 'shape'

图形
Shape

member THEME

THEME = 'theme'

主题
Theme

member TRANSFORM

TRANSFORM = 'transform'

数据转换
Data transform

enum GraphEvent

enum GraphEvent {
    BEFORE_CANVAS_INIT = 'beforecanvasinit',
    AFTER_CANVAS_INIT = 'aftercanvasinit',
    BEFORE_SIZE_CHANGE = 'beforesizechange',
    AFTER_SIZE_CHANGE = 'aftersizechange',
    BEFORE_ELEMENT_CREATE = 'beforeelementcreate',
    AFTER_ELEMENT_CREATE = 'afterelementcreate',
    BEFORE_ELEMENT_UPDATE = 'beforeelementupdate',
    AFTER_ELEMENT_UPDATE = 'afterelementupdate',
    BEFORE_ELEMENT_DESTROY = 'beforeelementdestroy',
    AFTER_ELEMENT_DESTROY = 'afterelementdestroy',
    BEFORE_ELEMENT_TRANSLATE = 'beforeelementtranslate',
    AFTER_ELEMENT_TRANSLATE = 'afterelementtranslate',
    BEFORE_DRAW = 'beforedraw',
    AFTER_DRAW = 'afterdraw',
    BEFORE_RENDER = 'beforerender',
    AFTER_RENDER = 'afterrender',
    BEFORE_ANIMATE = 'beforeanimate',
    AFTER_ANIMATE = 'afteranimate',
    BEFORE_LAYOUT = 'beforelayout',
    AFTER_LAYOUT = 'afterlayout',
    BEFORE_STAGE_LAYOUT = 'beforestagelayout',
    AFTER_STAGE_LAYOUT = 'afterstagelayout',
    BEFORE_TRANSFORM = 'beforetransform',
    AFTER_TRANSFORM = 'aftertransform',
    BATCH_START = 'batchstart',
    BATCH_END = 'batchend',
    BEFORE_DESTROY = 'beforedestroy',
    AFTER_DESTROY = 'afterdestroy',
    BEFORE_RENDERER_CHANGE = 'beforerendererchange',
    AFTER_RENDERER_CHANGE = 'afterrendererchange',
}

member AFTER_ANIMATE

AFTER_ANIMATE = 'afteranimate'

动画结束之后
After animation

member AFTER_CANVAS_INIT

AFTER_CANVAS_INIT = 'aftercanvasinit'

画布初始化之后
After the canvas is initialized

member AFTER_DESTROY

AFTER_DESTROY = 'afterdestroy'

销毁结束之后
After destruction

member AFTER_DRAW

AFTER_DRAW = 'afterdraw'

绘制结束之后
After drawing

member AFTER_ELEMENT_CREATE

AFTER_ELEMENT_CREATE = 'afterelementcreate'

元素创建之后
After creating element

member AFTER_ELEMENT_DESTROY

AFTER_ELEMENT_DESTROY = 'afterelementdestroy'

元素销毁之后
After destroying element

member AFTER_ELEMENT_TRANSLATE

AFTER_ELEMENT_TRANSLATE = 'afterelementtranslate'

元素平移之后
After element translation

member AFTER_ELEMENT_UPDATE

AFTER_ELEMENT_UPDATE = 'afterelementupdate'

元素更新之后
After updating element

member AFTER_LAYOUT

AFTER_LAYOUT = 'afterlayout'

布局结束之后
After layout

member AFTER_RENDER

AFTER_RENDER = 'afterrender'

渲染完成之后
After rendering

member AFTER_RENDERER_CHANGE

AFTER_RENDERER_CHANGE = 'afterrendererchange'

渲染器变更之后
After the renderer changes

member AFTER_SIZE_CHANGE

AFTER_SIZE_CHANGE = 'aftersizechange'

视口尺寸变更之后
After the viewport size changes

member AFTER_STAGE_LAYOUT

AFTER_STAGE_LAYOUT = 'afterstagelayout'

布局过程之后，用于流水线布局过程获取当前执行的布局
After the layout process, used to get the current layout being executed in the pipeline layout process

member AFTER_TRANSFORM

AFTER_TRANSFORM = 'aftertransform'

可视区域变化之后
After the visible area changes

member BATCH_END

BATCH_END = 'batchend'

批处理结束
Batch processing ends

member BATCH_START

BATCH_START = 'batchstart'

批处理开始
Batch processing starts

member BEFORE_ANIMATE

BEFORE_ANIMATE = 'beforeanimate'

动画开始之前
Before animation

member BEFORE_CANVAS_INIT

BEFORE_CANVAS_INIT = 'beforecanvasinit'

画布初始化之前
Before the canvas is initialized

member BEFORE_DESTROY

BEFORE_DESTROY = 'beforedestroy'

销毁开始之前
Before destruction

member BEFORE_DRAW

BEFORE_DRAW = 'beforedraw'

绘制开始之前
Before drawing

member BEFORE_ELEMENT_CREATE

BEFORE_ELEMENT_CREATE = 'beforeelementcreate'

元素创建之前
Before creating element

member BEFORE_ELEMENT_DESTROY

BEFORE_ELEMENT_DESTROY = 'beforeelementdestroy'

元素销毁之前
Before destroying element

member BEFORE_ELEMENT_TRANSLATE

BEFORE_ELEMENT_TRANSLATE = 'beforeelementtranslate'

元素平移之前
Before element translation

member BEFORE_ELEMENT_UPDATE

BEFORE_ELEMENT_UPDATE = 'beforeelementupdate'

元素更新之前
Before updating element

member BEFORE_LAYOUT

BEFORE_LAYOUT = 'beforelayout'

布局开始之前
Before layout

member BEFORE_RENDER

BEFORE_RENDER = 'beforerender'

渲染开始之前
Before rendering

member BEFORE_RENDERER_CHANGE

BEFORE_RENDERER_CHANGE = 'beforerendererchange'

渲染器变更之前
Before the renderer changes

member BEFORE_SIZE_CHANGE

BEFORE_SIZE_CHANGE = 'beforesizechange'

视口尺寸变更之前
Before the viewport size changes

member BEFORE_STAGE_LAYOUT

BEFORE_STAGE_LAYOUT = 'beforestagelayout'

布局过程之前，用于流水线布局过程获取当前执行的布局
Before the layout process, used to get the current layout being executed in the pipeline layout process

member BEFORE_TRANSFORM

BEFORE_TRANSFORM = 'beforetransform'

可视区域变化之前
Before the visible area changes

enum HistoryEvent

enum HistoryEvent {
    UNDO = 'undo',
    REDO = 'redo',
    CANCEL = 'cancel',
    ADD = 'add',
    CLEAR = 'clear',
    CHANGE = 'change',
}

member ADD

ADD = 'add'

当命令被添加到队列时
When the command is added

member CANCEL

CANCEL = 'cancel'

当命令被取消时
When the command is canceled

member CHANGE

CHANGE = 'change'

当历史队列发生变化时
When the command queue changes

member CLEAR

CLEAR = 'clear'

当历史队列被清空时
When the command queue is cleared

member REDO

REDO = 'redo'

当命令被重做时
When the command is redone

member UNDO

UNDO = 'undo'

当命令被撤销时
When the command is undone

enum NodeEvent

enum NodeEvent {
    CLICK = 'node:click',
    DBLCLICK = 'node:dblclick',
    POINTER_OVER = 'node:pointerover',
    POINTER_LEAVE = 'node:pointerleave',
    POINTER_ENTER = 'node:pointerenter',
    POINTER_MOVE = 'node:pointermove',
    POINTER_OUT = 'node:pointerout',
    POINTER_DOWN = 'node:pointerdown',
    POINTER_UP = 'node:pointerup',
    CONTEXT_MENU = 'node:contextmenu',
    DRAG_START = 'node:dragstart',
    DRAG = 'node:drag',
    DRAG_END = 'node:dragend',
    DRAG_ENTER = 'node:dragenter',
    DRAG_OVER = 'node:dragover',
    DRAG_LEAVE = 'node:dragleave',
    DROP = 'node:drop',
}

节点事件
Node event

member CLICK

CLICK = 'node:click'

点击时触发
Triggered when click

member CONTEXT_MENU

CONTEXT_MENU = 'node:contextmenu'

打开上下文菜单时触发
Triggered when the context menu is opened

member DBLCLICK

DBLCLICK = 'node:dblclick'

双击时触发
Triggered when double click

member DRAG

DRAG = 'node:drag'

拖拽过程中触发
Triggered when dragging

member DRAG_END

DRAG_END = 'node:dragend'

拖拽结束时触发
Triggered when dragging ends

member DRAG_ENTER

DRAG_ENTER = 'node:dragenter'

拖拽进入时触发
Triggered when dragging enters

member DRAG_LEAVE

DRAG_LEAVE = 'node:dragleave'

拖拽离开时触发
Triggered when dragging leaves

member DRAG_OVER

DRAG_OVER = 'node:dragover'

拖拽经过时触发
Triggered when dragging passes

member DRAG_START

DRAG_START = 'node:dragstart'

开始拖拽时触发
Triggered when dragging starts

member DROP

DROP = 'node:drop'

拖拽放下时触发
Triggered when dragging is dropped

member POINTER_DOWN

POINTER_DOWN = 'node:pointerdown'

指针按下时触发
Triggered when the pointer is pressed

member POINTER_ENTER

POINTER_ENTER = 'node:pointerenter'

指针移入时或移入子元素时触发（不会冒泡）
Triggered when the pointer enters or enters a child element (does not bubble)

member POINTER_LEAVE

POINTER_LEAVE = 'node:pointerleave'

指针移出时触发
Triggered when the pointer leaves

member POINTER_MOVE

POINTER_MOVE = 'node:pointermove'

指针移动时触发
Triggered when the pointer moves

member POINTER_OUT

POINTER_OUT = 'node:pointerout'

指针移出时触发
Triggered when the pointer leaves

member POINTER_OVER

POINTER_OVER = 'node:pointerover'

指针移入时触发
Triggered when the pointer enters

member POINTER_UP

POINTER_UP = 'node:pointerup'

指针抬起时触发
Triggered when the pointer is lifted

Type Aliases

type AnimationExecutor

type AnimationExecutor = (
    element: Element,
    keyframes: [Record<string, unknown>, Record<string, unknown>],
    options: STDAnimation
) => IAnimation | null;

type AnimationStage

type AnimationStage =
    | 'enter'
    | 'update'
    | 'exit'
    | 'show'
    | 'hide'
    | 'collapse'
    | 'expand'
    | string;

元素动画执行阶段
Stage of element animation execution

type BaseTransformOptions

type BaseTransformOptions = CustomBehaviorOption;

type BehaviorOptions

type BehaviorOptions = (
    | string
    | CustomBehaviorOption
    | ((this: Graph) => CustomBehaviorOption)
)[];

type CardinalPlacement

type CardinalPlacement = 'left' | 'right' | 'top' | 'bottom';

type CategoricalPalette

type CategoricalPalette = string[];

type CornerPlacement

type CornerPlacement =
    | 'left-top'
    | 'left-bottom'
    | 'right-top'
    | 'right-bottom'
    | 'top-left'
    | 'top-right'
    | 'bottom-left'
    | 'bottom-right';

type DirectionalPlacement

type DirectionalPlacement = CardinalPlacement | CornerPlacement | 'center';

type DrawData

type DrawData = {
    add: ProcedureData;
    update: ProcedureData;
    remove: ProcedureData;
};

type EdgeDirection

type EdgeDirection = 'in' | 'out' | 'both';

边的方向 - 'in': 入边 - 'out': 出边 - 'both': 双向边
Edge direction - 'in': Inbound edge - 'out': Outbound edge - 'both': Bidirectional edge

type Element

type Element = Node | Edge | Combo;

type ElementDatum

type ElementDatum = NodeData | EdgeData | ComboData;

type ElementType

type ElementType = 'node' | 'edge' | 'combo';

type FixShapeConfig

type FixShapeConfig = {
    /**
     * <zh/> 指定要固定大小的图形，可以是图形的类名字，或者是一个函数，该函数接收构成元素的所有图形并返回目标图形
     *
     * <en/> Specify the shape to be fixed in size. This can be a class name string of the shape, or a function that takes all shapes composing the element and returns the target shape
     */
    shape: string | ((shapes: DisplayObject[]) => DisplayObject);
    /**
     * <zh/> 指定要固定大小的图形属性字段。如果未指定，则默认固定整个图形的大小
     *
     * <en/> Specify the fields of the shape to be fixed in size. If not specified, the entire shape's size will be fixed by default
     */
    fields?: string[];
};

type HierarchyKey

type HierarchyKey = 'tree' | 'combo';

层级结构类别
Hierarchy structure category
Remarks
G6 中树形层级结构和组合层级结构是相互独立的，分别对应不同的数据结构一些 API 需要指定层级结构类别，例如 getAncestorsData、getParentData
The tree hierarchy structure and the combo hierarchy structure in G6 are independent of each other, corresponding to different data structures Some APIs need to specify the hierarchy structure category, such as getAncestorsData, getParentData

type ID

type ID = string;

type IEvent

type IEvent =
    | IGraphLifeCycleEvent
    | IAnimateEvent
    | IElementLifeCycleEvent
    | IViewportEvent
    | IPointerEvent
    | IWheelEvent
    | IKeyboardEvent
    | IDragEvent;

type LayoutOptions

type LayoutOptions = SingleLayoutOptions | SingleLayoutOptions[];

type LoopPlacement

type LoopPlacement = CardinalPlacement | CornerPlacement;

type NodeCentralityOptions

type NodeCentralityOptions =
    | {
          type: 'degree';
          direction?: EdgeDirection;
      }
    | {
          type: 'betweenness';
          directed?: boolean;
          weightPropertyName?: string;
      }
    | {
          type: 'closeness';
          directed?: boolean;
          weightPropertyName?: string;
      }
    | {
          type: 'eigenvector';
          directed?: boolean;
      }
    | {
          type: 'pagerank';
          epsilon?: number;
          linkProb?: number;
      };

type NodeLikeData

type NodeLikeData = NodeData | ComboData;

type Padding

type Padding = number | number[];

type Placement

type Placement = RelativePlacement | DirectionalPlacement;

type PluginOptions

type PluginOptions = (
    | string
    | CustomPluginOption
    | ((this: Graph) => CustomPluginOption)
)[];

type Point

type Point = [number, number] | [number, number, number] | Float32Array;

type Prefix

type Prefix<P extends string, T extends object> = {
    [K in keyof T as K extends string ? PrefixKey<P, K> : never]?: T[K];
};

Remarks
Prefix<P, T> 是一种类型模式，用于将特定的前缀 P 应用到类型 T 上。在我们的配置中，这意味着我们将为一组属性或行为添加一个前缀，以表示它们属于某个具体的上下文或分类。
当你在文档中看到类似 Prefix<'label', StyleProps> 的表达式，它表示给 StyleProps 类型的属性加上 label 前缀，以形成新的属性名称。例如，color 属性将以 labelColor 形式使用。
Prefix<P, T> is a type pattern used to apply a specific prefix P to the type T. In our configuration, this means adding a prefix to a set of properties or behaviors to indicate that they belong to a specific context or category.
When you see expressions like Prefix<'label', StyleProps> in the document, it means adding the label prefix to the properties of the StyleProps type to form a new property name. For example, the color property will be used in the form of labelColor.

type PrefixKey

type PrefixKey<
    P extends string = string,
    K extends string = string
> = `${P}${Capitalize<K>}`;

type RelativePlacement

type RelativePlacement = [number, number];

type ShortcutKey

type ShortcutKey = string[];

type SingleLayoutOptions

type SingleLayoutOptions = BuiltInLayoutOptions | BaseLayoutOptions;

type Size

type Size = number | Vector2 | Vector3;

type State

type State = string;

type STDLayoutOptions

type STDLayoutOptions = BaseLayoutOptions;

type ThemeOptions

type ThemeOptions = false | 'light' | 'dark' | string;

主题配置项
Theme Options
Modifiers
- @public

type TreeData

type TreeData = {
    id: string;
    children?: TreeData[];
    depth?: number;
    [key: string]: any;
};

type TriangleDirection

type TriangleDirection = 'up' | 'left' | 'right' | 'down';

三角形指向
Triangle direction

type Vector2

type Vector2 = [number, number] | Float32Array;

type Vector3

type Vector3 = [number, number, number] | Float32Array;

type ViewportAnimationEffectTiming

type ViewportAnimationEffectTiming =
    | boolean
    | {
          easing?: string;
          duration?: number;
      };

Namespaces

namespace @antv/hierarchy

module '@antv/hierarchy' {}

Package Files (131)

Dependencies (11)

Dev Dependencies (11)

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@antv/g6.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@antv/g6)

HTML

<a href="https://www.jsdocs.io/package/@antv/g6"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 29 days ago.
Package analyzed in 23655 ms.
Missing or incorrect documentation? Open an issue for this package.

@antv/g6

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable iconfont

variable version

Functions

function effect

Parameter target

Parameter key

Parameter style

Returns

Deprecated

function idOf

Parameter data

Returns

function invokeLayoutMethod

Parameter layout

Parameter method

Parameter args

Returns

Remarks

function isCollapsed

Parameter nodeLike

Returns

function omitStyleProps

Parameter style

Parameter prefix

Returns

function parseSize

Parameter size

Returns

function positionOf

Parameter datum

Returns

function register

Parameter category

Parameter type

Parameter Ctor

Parameter override

Remarks

Example 1

Modifiers

function setVisibility

Parameter shape

Parameter value

Parameter filter

Remarks

function subStyleProps

Parameter style

Parameter prefix

Returns

function treeToGraphData

Parameter treeData

Parameter getter

Returns

Classes

class AutoAdaptLabel

Remarks

constructor

property defaultOptions

property onToggleVisibility

property onTransform

property sortLabelElementsInView

method destroy

method update

class Background

Remarks

constructor

property defaultOptions

class Badge

Remarks