logo

G6

  • Docs
  • API
  • Playground
  • Community
  • Productsantv logo arrow
  • 5.0.48
  • Data
  • Canvas Operations
  • Element Operations
  • Graph Instance
  • Drawing and Rendering
  • Viewport Operations
  • Layout
  • Graph Options
  • Behavior
  • Plugin
  • Theme
  • Data Transformation
  • Event Listening
  • Coordinate Transformation
  • Export Image

Data

Next
Canvas Operations

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

Overview of Data Operations

G6 provides a comprehensive data operation API, covering the complete lifecycle of graph data from query, modification to update.

API Reference

Graph.getData()

Get the complete data of the graph.

getData(): Required<GraphData>;

Return Value:

  • Type: GraphData

  • Description: Returns the complete graph data containing all nodes, edges, and combo data

Example:

const graphData = graph.getData();
console.log('Node data:', graphData.nodes);
console.log('Edge data:', graphData.edges);
console.log('Combo data:', graphData.combos);

Graph.getNodeData()

Get node data, supporting three calling methods.

// Get all node data
getNodeData(): NodeData[];
// Get single node data
getNodeData(id: ID): NodeData;
// Get multiple node data
getNodeData(ids: ID[]): NodeData[];

Parameters:

ParameterDescriptionTypeDefaultRequired
idNode IDstring-
idsNode ID arraystring[]-

Return Value:

  • Type: NodeData | NodeData[]
  • Description: Returns the specified node data or node data array

Example:

// Get all nodes
const nodes = graph.getNodeData();
// Get single node
const node = graph.getNodeData('node1');
console.log('Node position:', node.style.x, node.style.y);
// Get multiple nodes
const [node1, node2] = graph.getNodeData(['node1', 'node2']);

Graph.getEdgeData()

Get edge data, supporting three calling methods.

// Get all edge data
getEdgeData(): EdgeData[];
// Get single edge data
getEdgeData(id: ID): EdgeData;
// Get multiple edge data
getEdgeData(ids: ID[]): EdgeData[];

Parameters:

ParameterDescriptionTypeDefaultRequired
idEdge IDstring-
idsEdge ID arraystring[]-

Return Value:

  • Type: EdgeData | EdgeData[]
  • Description: Returns the specified edge data or edge data array

Example:

// Get all edges
const edges = graph.getEdgeData();
// Get single edge
const edge = graph.getEdgeData('edge1');
console.log('Edge source and target:', edge.source, edge.target);
// Get multiple edges
const [edge1, edge2] = graph.getEdgeData(['edge1', 'edge2']);

Graph.getComboData()

Get combo data, supporting three calling methods.

// Get all combo data
getComboData(): ComboData[];
// Get single combo data
getComboData(id: ID): ComboData;
// Get multiple combo data
getComboData(ids: ID[]): ComboData[];

Parameters:

ParameterDescriptionTypeDefaultRequired
idCombo IDstring-
idsCombo ID arraystring[]-

Return Value:

  • Type: ComboData | ComboData[]
  • Description: Returns the specified combo data or combo data array

Example:

// Get all combos
const combos = graph.getComboData();
// Get single combo
const combo = graph.getComboData('combo1');
console.log('Nodes in combo:', combo.children);
// Get multiple combos
const [combo1, combo2] = graph.getComboData(['combo1', 'combo2']);

Graph.getElementData()

Get single element data, supporting two calling methods.

⚠️ Note: This API directly gets the data of the element without considering the element type.

// Get single element data
getElementData(id: ID): ElementDatum;
// Get multiple element data
getElementData(ids: ID[]): ElementDatum[];

Parameters:

ParameterDescriptionTypeDefaultRequired
idElement IDstring-
idsElement ID arraystring[]-

Return Value:

  • Type: ElementDatum | ElementDatum[]
  • Description: Directly gets the data of the element without considering the element type

Example:

const element = graph.getElementData('node-1');
console.log('Element data:', element);
const elements = graph.getElementData(['node-1', 'edge-1']);
console.log('Multiple element data:', elements);

Graph.getElementDataByState()

Get element data in a specified state, supporting three calling methods.

// Get node data in a specified state
getElementDataByState(elementType: 'node', state: string): NodeData[];
// Get edge data in a specified state
getElementDataByState(elementType: 'edge', state: string): EdgeData[];
// Get combo data in a specified state
getElementDataByState(elementType: 'combo', state: string): ComboData[];

Parameters:

ParameterDescriptionTypeDefaultRequired
elementTypeElement type'node' | 'edge' | 'combo'-✓
stateStatestring-✓

Return Value:

  • Type: NodeData[] | EdgeData[] | ComboData[]
  • Description: Returns node data, edge data, or combo data in the specified state

Example:

const selectedNodes = graph.getElementDataByState('node', 'selected');
console.log('Selected nodes:', selectedNodes);
const selectedEdges = graph.getElementDataByState('edge', 'selected');
console.log('Selected edges:', selectedEdges);
const selectedCombos = graph.getElementDataByState('combo', 'selected');
console.log('Selected combos:', selectedCombos);

Built-in States:

  • 'selected'
  • 'highlight'
  • 'active'
  • 'inactive'
  • 'disabled'

Graph.getNeighborNodesData()

Get the data of neighbor nodes of a node or combo.

getNeighborNodesData(id: ID): NodeData[];

Parameters:

ParameterDescriptionTypeDefaultRequired
idNode or combo IDstring-✓

Return Value:

  • Type: NodeData[]
  • Description: Returns neighbor node data

Example:

const neighbors = graph.getNeighborNodesData('node-1');
console.log('Neighbor nodes:', neighbors);

Graph.getRelatedEdgesData()

Get the data of edges related to a node or combo.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
idNode or combo IDstring-✓
directionEdge direction'in' | 'out' | 'both'-

Return Value:

  • Type: EdgeData[]
  • Description: Returns the data of edges related to the specified node or combo

Example:

const relatedEdges = graph.getRelatedEdgesData('node-1');
console.log('Related edges:', relatedEdges);

Graph.getParentData()

Get the data of the parent element of a node or combo.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
idNode or combo IDstring-✓
hierarchySpecify hierarchy type'tree' | 'combo'-

Return Value:

  • Type: NodeData | ComboData | undefined
  • Description: Returns the parent element data, or undefined if it does not exist

Example:

// Get the parent node in a tree graph
const treeParent = graph.getParentData('node1', 'tree');
// Get the parent combo in a combo
const comboParent = graph.getParentData('node1', 'combo');

Graph.getChildrenData()

Get the data of child elements of a node or combo.

getChildrenData(id: ID): (NodeData \| ComboData)[];

Parameters:

ParameterDescriptionTypeDefaultRequired
idNode or combo IDstring-✓

Return Value:

  • Type: (NodeData | ComboData)[]
  • Description: Returns an array of child element data

Note:

  • Querying combo's child elements: If the id corresponds to a combo element, you can directly use this API to get all its child elements.
  • Querying node's child elements: If the id corresponds to a node, only when the graph data is a tree structure (i.e., the node data maintains a children field, and children is an array of child node IDs for that node), can you use this API to get the child elements of that node. Otherwise, an empty array is returned.

Example:

// Get the child elements of a combo
const children = graph.getChildrenData('combo1');
console.log('Number of child nodes:', children.length);
// Process each child element
children.forEach((child) => {
console.log('Child element ID:', child.id);
});

Graph.getAncestorsData()

Get the data of all ancestor elements of a node or combo.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
idNode or combo IDstring-✓
hierarchySpecify hierarchy type'tree' | 'combo'-✓

Return Value:

  • Type: NodeData[] | ComboData[]
  • Description: Returns an array of ancestor element data, ordered from parent to root

Example:

// Get all ancestor nodes in a tree graph
const treeAncestors = graph.getAncestorsData('node1', 'tree');
console.log(
'Ancestor node path:',
treeAncestors.map((node) => node.id),
);
// Get all parent combos in a combo
const comboAncestors = graph.getAncestorsData('node1', 'combo');

Graph.getDescendantsData()

Get the data of all descendant elements of a node or combo.

getDescendantsData(id: ID): NodeLikeData[];

Parameters:

ParameterDescriptionTypeDefaultRequired
idNode or combo IDstring-✓

Return Value:

  • Type: NodeData[] | ComboData[]
  • Description: Returns an array of descendant element data

Example:

// Get all descendants of a node
const descendants = graph.getDescendantsData('node1');
console.log('Number of descendants:', descendants.length);
// Process all descendant elements
descendants.forEach((descendant) => {
console.log('Descendant element ID:', descendant.id);
});

Graph.setData()

Set the complete data of the graph.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
dataNew graph data or a function returning new graph dataGraphData | ((prev: GraphData) => GraphData)-✓

Example:

// Directly set data
graph.setData({
nodes: [
{ id: 'node1', style: { x: 100, y: 100 } },
{ id: 'node2', style: { x: 200, y: 200 } },
],
edges: [{ id: 'edge1', source: 'node1', target: 'node2' }],
});
// Use functional incremental update: get current graph data and return new graph data
graph.setData((prev) => ({
...prev,
nodes: [...prev.nodes, { id: 'node3', style: { x: 300, y: 300 } }],
}));

Graph.addData()

Add new element data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
dataGraph data to add or a function returning new graph dataGraphData | ((prev: GraphData) => GraphData)-✓

Example:

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

Graph.addNodeData()

Add new node data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
dataNode data to add or a function returning node dataNodeData[] | (prev: NodeData[]) => NodeData[]-✓

Example:

// Add single node
graph.addNodeData([
{
id: 'node1',
style: { x: 100, y: 100 },
data: { label: 'Node 1' },
},
]);
// Add multiple nodes
graph.addNodeData([
{ id: 'node2', style: { x: 200, y: 200 } },
{ id: 'node3', style: { x: 300, y: 300 } },
]);
// Functional addition
graph.addNodeData((prev) => [...prev, { id: 'node4', style: { x: 400, y: 400 } }]);

Graph.addEdgeData()

Add new edge data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
dataEdge data to add or a function returning edge dataEdgeData[] | ((prev: EdgeData[]) => EdgeData[])-✓

Example:

// Add single edge
graph.addEdgeData([
{
id: 'edge1',
source: 'node1',
target: 'node2',
data: {
weight: 1,
label: 'Relation',
},
},
]);
// Add multiple edges
graph.addEdgeData([
{ id: 'edge2', source: 'node2', target: 'node3' },
{ id: 'edge3', source: 'node3', target: 'node1' },
]);
// Functional addition
graph.addEdgeData((prev) => [...prev, { id: 'edge4', source: 'node1', target: 'node4' }]);

Graph.addComboData()

Add new combo data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
dataCombo data to add or a function returning combo dataComboData[] | (prev: ComboData[]) => ComboData[]-✓

Example:

graph.addComboData([{ id: 'combo1', children: ['node1', 'node2'] }]);

Graph.addChildrenData()

Add child node data to a tree graph node.

⚠️ Note: Use addNodeData / addComboData methods to add child nodes to a combo.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
parentIdParent node IDstring-✓
childrenDataChild node dataNodeData[]-✓

Example:

graph.addChildrenData('node1', [{ id: 'node2' }]);

Graph.removeData()

Remove element data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
idsElement IDs to remove or a function returning element IDsDataID | ((data: GraphData) => DataID)-✓

Return Value:

  • Type: void

Example:

graph.removeData({
nodes: ['node-1', 'node-2'],
edges: ['edge-1'],
});

Graph.removeNodeData()

Remove node data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
idsNode IDs to remove or a function returning node IDsID[] | ((data: NodeData[]) => ID[])-✓

Return Value:

  • Type: void

Example:

graph.removeNodeData(['node-1', 'node-2']);

Graph.removeEdgeData()

Remove edge data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
idsEdge IDs to remove or a function returning edge IDsID[] | ((data: EdgeData[]) => ID[])-✓

Return Value:

  • Type: void

Example:

graph.removeEdgeData(['edge-1']);

Graph.removeComboData()

Remove combo data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
idsCombo IDs to remove or a function returning combo IDsID[] | (data: ComboData[]) => ID[]-✓

Return Value:

  • Type: void

Example:

graph.removeComboData(['combo-1']);

Graph.updateData()

Update element data.

⚠️ Note: Only the data that needs to be updated needs to be passed in, not the complete data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
dataElement data to update or a function returning element dataPartialGraphData | ((prev: GraphData) => PartialGraphData)-✓

Return Value:

  • Type: void

Example:

graph.updateData({
nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }],
edges: [{ id: 'edge-1', style: { lineWidth: 2 } }],
});

Graph.updateNodeData()

Update node data.

⚠️ Note: Only the data that needs to be updated needs to be passed in, not the complete data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
dataNode data to update or a function returning node dataNodeData[] | (prev: NodeData[]) => NodeData[]-✓

Return Value:

  • Type: void

Example:

graph.updateNodeData([{ id: 'node-1', style: { x: 100, y: 100 } }]);

Graph.updateEdgeData()

Update edge data.

⚠️ Note: Only the data that needs to be updated needs to be passed in, not the complete data.

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

Parameters:

| Parameter | Description | Type | Default | Required | | --------- | ----------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | -------- | --- | --- | | |

Return Value:

  • Type: void

Example:

graph.updateEdgeData([{ id: 'edge-1', style: { lineWidth: 2 } }]);

Graph.updateComboData()

Update combo data.

⚠️ Note: Only the data that needs to be updated needs to be passed in, not the complete data.

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

Parameters:

ParameterDescriptionTypeDefaultRequired
dataCombo data to update or a function returning combo dataComboData[] | (prev: ComboData[]) => ComboData[]-✓

Return Value:

  • Type: void

Example:

graph.updateComboData([{ id: 'combo-1', style: { x: 100, y: 100 } }]);

Type Definitions

ID

Element ID type.

type ID = string;

DataID

Multiple element ID type.

interface DataID {
nodes?: ID[];
edges?: ID[];
combos?: ID[];
}

GraphData

G6 graph data type.

interface GraphData {
nodes?: NodeData[];
edges?: EdgeData[];
combos?: ComboData[];
}

NodeData

Node data type.

interface NodeData {
id: string; // Node ID
type?: string; // Node type
data?: Record<string, any>; // Node data
style?: Record<string, any>; // Node style
states?: string[]; // Initial node states
combo?: string; // Belonging combo
children?: string[]; // Array of child node IDs
}

For detailed type definitions, please refer to Node Data.

EdgeData

Edge data type.

interface EdgeData {
source: string; // Source ID
target: string; // Target ID
id?: string; // Edge ID
type?: string; // Edge type
data?: Record<string, any>; // Edge data
style?: Record<string, any>; // Edge style
states?: string[]; // Initial edge states
}

For detailed type definitions, please refer to Edge Data.

ComboData

Combo data type.

interface ComboData {
id: string; // Combo ID
type?: string; // Combo type
data?: Record<string, any>; // Combo data
style?: Record<string, any>; // Combo style
states?: string[]; // Initial combo states
combo?: string; // Parent combo ID
}

For detailed type definitions, please refer to Combo Data.