@antv/g6
- Version 5.0.42
- Published
- 6.85 MB
- 12 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
Functions
Classes
BaseNode
- defaultStyleProps
- drawBadgeShapes()
- drawHaloShape()
- drawIconShape()
- drawKeyShape()
- drawLabelShape()
- drawPortShapes()
- getBadgesStyle()
- getBadgeStyle()
- getCenter()
- getHaloStyle()
- getIconStyle()
- getIntersectPoint()
- getKeyStyle()
- getLabelStyle()
- getPorts()
- getPortsStyle()
- getPortXY()
- getSize()
- onframe()
- render()
- type
- update()
Canvas
- appendChild()
- context
- destroy()
- document
- getBounds()
- getCamera()
- getCanvasByClient()
- getCanvasByViewport()
- getClientByCanvas()
- getClientByViewport()
- getConfig()
- getContainer()
- getContextService()
- getLayer()
- getLayers()
- getRenderer()
- getRoot()
- getSize()
- getViewportByCanvas()
- getViewportByClient()
- ready
- resize()
- setCursor()
- setRenderer()
- toDataURL()
Graph
- addChildrenData()
- addComboData()
- addData()
- addEdgeData()
- addNodeData()
- clear()
- collapseElement()
- destroy()
- destroyed
- draw()
- expandElement()
- fitCenter()
- fitView()
- focusElement()
- frontElement()
- getAncestorsData()
- getBehaviors()
- getCanvas()
- getCanvasByClient()
- getCanvasByViewport()
- getCanvasCenter()
- getChildrenData()
- getClientByCanvas()
- getComboData()
- getData()
- getDescendantsData()
- getEdgeData()
- getElementData()
- getElementDataByState()
- getElementPosition()
- getElementRenderBounds()
- getElementRenderStyle()
- getElementState()
- getElementType()
- getElementVisibility()
- getElementZIndex()
- getLayout()
- getNeighborNodesData()
- getNodeData()
- getOptions()
- getParentData()
- getPluginInstance()
- getPlugins()
- getPosition()
- getRelatedEdgesData()
- getRotation()
- getSize()
- getTheme()
- getTransforms()
- getViewportByCanvas()
- getViewportCenter()
- getZoom()
- getZoomRange()
- hideElement()
- layout()
- off()
- on()
- once()
- removeComboData()
- removeData()
- removeEdgeData()
- removeNodeData()
- render()
- rendered
- resize()
- rotateBy()
- rotateTo()
- setBehaviors()
- setCombo()
- setData()
- setEdge()
- setElementState()
- setElementVisibility()
- setElementZIndex()
- setLayout()
- setNode()
- setOptions()
- setPlugins()
- setSize()
- setTheme()
- setTransforms()
- setZoomRange()
- showElement()
- stopLayout()
- toDataURL()
- translateBy()
- translateElementBy()
- translateElementTo()
- translateTo()
- updateBehavior()
- updateComboData()
- updateData()
- updateEdgeData()
- updateNodeData()
- updatePlugin()
- updateTransform()
- zoomBy()
- zoomTo()
Interfaces
WatermarkOptions
- backgroundAttachment
- backgroundBlendMode
- backgroundClip
- backgroundColor
- backgroundImage
- backgroundOrigin
- backgroundPosition
- backgroundPositionX
- backgroundPositionY
- backgroundRepeat
- backgroundSize
- height
- imageURL
- opacity
- rotate
- text
- textAlign
- textBaseline
- textFill
- textFontFamily
- textFontSize
- textFontVariant
- textFontWeight
- width
Enums
GraphEvent
- AFTER_ANIMATE
- AFTER_CANVAS_INIT
- AFTER_DESTROY
- AFTER_DRAW
- AFTER_ELEMENT_CREATE
- AFTER_ELEMENT_DESTROY
- AFTER_ELEMENT_TRANSLATE
- AFTER_ELEMENT_UPDATE
- AFTER_LAYOUT
- AFTER_RENDER
- AFTER_RENDERER_CHANGE
- AFTER_SIZE_CHANGE
- AFTER_STAGE_LAYOUT
- AFTER_TRANSFORM
- BATCH_END
- BATCH_START
- BEFORE_ANIMATE
- BEFORE_CANVAS_INIT
- BEFORE_DESTROY
- BEFORE_DRAW
- BEFORE_ELEMENT_CREATE
- BEFORE_ELEMENT_DESTROY
- BEFORE_ELEMENT_TRANSLATE
- BEFORE_ELEMENT_UPDATE
- BEFORE_LAYOUT
- BEFORE_RENDER
- BEFORE_RENDERER_CHANGE
- BEFORE_SIZE_CHANGE
- BEFORE_STAGE_LAYOUT
- BEFORE_TRANSFORM
Type Aliases
- AnimationExecutor
- AnimationStage
- BaseTransformOptions
- BehaviorOptions
- CardinalPlacement
- CategoricalPalette
- CornerPlacement
- DirectionalPlacement
- DrawData
- EdgeDirection
- Element
- ElementDatum
- ElementType
- FixShapeConfig
- HierarchyKey
- ID
- IEvent
- LayoutOptions
- LoopPlacement
- NodeCentralityOptions
- NodeLikeData
- Padding
- Placement
- PluginOptions
- Point
- Prefix
- PrefixKey
- RelativePlacement
- ShortcutKey
- SingleLayoutOptions
- Size
- State
- STDLayoutOptions
- ThemeOptions
- TreeData
- TriangleDirection
- Vector2
- Vector3
- ViewportAnimationEffectTiming
Namespaces
Variables
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
Example 1
const combo1 = graph.getComboData('combo-1');data
批量获取多个组合数据
Get multiple combo data in batch
Parameter ids
组合ID 数组 | combo ID array
Returns
组合数据 | combo data
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
Example 1
const edge1 = graph.getEdgeData('edge-1');data
批量获取多条边数据
Get multiple edge data in batch
Parameter ids
边 ID 数组 | edge ID array
Returns
边数据 | edge data
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
Example 1
const node1 = graph.getNodeData('node-1');data
批量获取多个节点数据
Get multiple node data in batch
Parameter ids
节点 ID 数组 | node ID array
Returns
节点数据 | node data
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
andexit
methods to request and exit full-screenconst 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: () => Promise<void>;
执行布局
Execute layout 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
方法获取边的实际 IDIf 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
methodExample 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
andhidden
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;