Loading...
G6 provides a comprehensive data operation API, covering the complete lifecycle of graph data from query, modification to update.
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);
Get node data, supporting three calling methods.
// Get all node datagetNodeData(): NodeData[];// Get single node datagetNodeData(id: ID): NodeData;// Get multiple node datagetNodeData(ids: ID[]): NodeData[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Node ID | string | - | |
ids | Node ID array | string[] | - |
Return Value:
Example:
// Get all nodesconst nodes = graph.getNodeData();// Get single nodeconst node = graph.getNodeData('node1');console.log('Node position:', node.style.x, node.style.y);// Get multiple nodesconst [node1, node2] = graph.getNodeData(['node1', 'node2']);
Get edge data, supporting three calling methods.
// Get all edge datagetEdgeData(): EdgeData[];// Get single edge datagetEdgeData(id: ID): EdgeData;// Get multiple edge datagetEdgeData(ids: ID[]): EdgeData[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Edge ID | string | - | |
ids | Edge ID array | string[] | - |
Return Value:
Example:
// Get all edgesconst edges = graph.getEdgeData();// Get single edgeconst edge = graph.getEdgeData('edge1');console.log('Edge source and target:', edge.source, edge.target);// Get multiple edgesconst [edge1, edge2] = graph.getEdgeData(['edge1', 'edge2']);
Get combo data, supporting three calling methods.
// Get all combo datagetComboData(): ComboData[];// Get single combo datagetComboData(id: ID): ComboData;// Get multiple combo datagetComboData(ids: ID[]): ComboData[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Combo ID | string | - | |
ids | Combo ID array | string[] | - |
Return Value:
Example:
// Get all combosconst combos = graph.getComboData();// Get single comboconst combo = graph.getComboData('combo1');console.log('Nodes in combo:', combo.children);// Get multiple combosconst [combo1, combo2] = graph.getComboData(['combo1', 'combo2']);
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 datagetElementData(id: ID): ElementDatum;// Get multiple element datagetElementData(ids: ID[]): ElementDatum[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Element ID | string | - | |
ids | Element ID array | string[] | - |
Return Value:
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);
Get element data in a specified state, supporting three calling methods.
// Get node data in a specified stategetElementDataByState(elementType: 'node', state: string): NodeData[];// Get edge data in a specified stategetElementDataByState(elementType: 'edge', state: string): EdgeData[];// Get combo data in a specified stategetElementDataByState(elementType: 'combo', state: string): ComboData[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
elementType | Element type | 'node' | 'edge' | 'combo' | - | ✓ |
state | State | string | - | ✓ |
Return Value:
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'
Get the data of neighbor nodes of a node or combo.
getNeighborNodesData(id: ID): NodeData[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Node or combo ID | string | - | ✓ |
Return Value:
Example:
const neighbors = graph.getNeighborNodesData('node-1');console.log('Neighbor nodes:', neighbors);
Get the data of edges related to a node or combo.
getRelatedEdgesData(id: ID, direction?: EdgeDirection): EdgeData[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Node or combo ID | string | - | ✓ |
direction | Edge direction | 'in' | 'out' | 'both' | - |
Return Value:
Example:
const relatedEdges = graph.getRelatedEdgesData('node-1');console.log('Related edges:', relatedEdges);
Get the data of the parent element of a node or combo.
getParentData(id: ID, hierarchy: HierarchyKey): NodeLikeData | undefined;
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Node or combo ID | string | - | ✓ |
hierarchy | Specify hierarchy type | 'tree' | 'combo' | - |
Return Value:
Example:
// Get the parent node in a tree graphconst treeParent = graph.getParentData('node1', 'tree');// Get the parent combo in a comboconst comboParent = graph.getParentData('node1', 'combo');
Get the data of child elements of a node or combo.
getChildrenData(id: ID): (NodeData \| ComboData)[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Node or combo ID | string | - | ✓ |
Return Value:
Note:
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 comboconst children = graph.getChildrenData('combo1');console.log('Number of child nodes:', children.length);// Process each child elementchildren.forEach((child) => {console.log('Child element ID:', child.id);});
Get the data of all ancestor elements of a node or combo.
getAncestorsData(id: ID, hierarchy: HierarchyKey): NodeLikeData[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Node or combo ID | string | - | ✓ |
hierarchy | Specify hierarchy type | 'tree' | 'combo' | - | ✓ |
Return Value:
Example:
// Get all ancestor nodes in a tree graphconst treeAncestors = graph.getAncestorsData('node1', 'tree');console.log('Ancestor node path:',treeAncestors.map((node) => node.id),);// Get all parent combos in a comboconst comboAncestors = graph.getAncestorsData('node1', 'combo');
Get the data of all descendant elements of a node or combo.
getDescendantsData(id: ID): NodeLikeData[];
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
id | Node or combo ID | string | - | ✓ |
Return Value:
Example:
// Get all descendants of a nodeconst descendants = graph.getDescendantsData('node1');console.log('Number of descendants:', descendants.length);// Process all descendant elementsdescendants.forEach((descendant) => {console.log('Descendant element ID:', descendant.id);});
Set the complete data of the graph.
setData(data: GraphData | ((prev: GraphData) => GraphData)): void;
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
data | New graph data or a function returning new graph data | GraphData | ((prev: GraphData) => GraphData) | - | ✓ |
Example:
// Directly set datagraph.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 datagraph.setData((prev) => ({...prev,nodes: [...prev.nodes, { id: 'node3', style: { x: 300, y: 300 } }],}));
Add new element data.
addData(data: GraphData | ((prev: GraphData) => GraphData)): void;
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
data | Graph data to add or a function returning new graph data | GraphData | ((prev: GraphData) => GraphData) | - | ✓ |
Example:
graph.addData({nodes: [{ id: 'node-1' }, { id: 'node-2' }],edges: [{ source: 'node-1', target: 'node-2' }],});
Add new node data.
addNodeData(data: NodeData[] | ((prev: NodeData[]) => NodeData[])): void;
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
data | Node data to add or a function returning node data | NodeData[] | (prev: NodeData[]) => NodeData[] | - | ✓ |
Example:
// Add single nodegraph.addNodeData([{id: 'node1',style: { x: 100, y: 100 },data: { label: 'Node 1' },},]);// Add multiple nodesgraph.addNodeData([{ id: 'node2', style: { x: 200, y: 200 } },{ id: 'node3', style: { x: 300, y: 300 } },]);// Functional additiongraph.addNodeData((prev) => [...prev, { id: 'node4', style: { x: 400, y: 400 } }]);
Add new edge data.
addEdgeData(data: EdgeData[] | ((prev: EdgeData[]) => EdgeData[])): void;
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
data | Edge data to add or a function returning edge data | EdgeData[] | ((prev: EdgeData[]) => EdgeData[]) | - | ✓ |
Example:
// Add single edgegraph.addEdgeData([{id: 'edge1',source: 'node1',target: 'node2',data: {weight: 1,label: 'Relation',},},]);// Add multiple edgesgraph.addEdgeData([{ id: 'edge2', source: 'node2', target: 'node3' },{ id: 'edge3', source: 'node3', target: 'node1' },]);// Functional additiongraph.addEdgeData((prev) => [...prev, { id: 'edge4', source: 'node1', target: 'node4' }]);
Add new combo data.
addComboData(data: ComboData[] | ((prev: ComboData[]) => ComboData[])): void;
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
data | Combo data to add or a function returning combo data | ComboData[] | (prev: ComboData[]) => ComboData[] | - | ✓ |
Example:
graph.addComboData([{ id: 'combo1', children: ['node1', 'node2'] }]);
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:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
parentId | Parent node ID | string | - | ✓ |
childrenData | Child node data | NodeData[] | - | ✓ |
Example:
graph.addChildrenData('node1', [{ id: 'node2' }]);
Remove element data.
removeData(ids: DataID | ((data: GraphData) => DataID)): void;
Parameters:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
ids | Element IDs to remove or a function returning element IDs | DataID | ((data: GraphData) => DataID) | - | ✓ |
Return Value:
Example:
graph.removeData({nodes: ['node-1', 'node-2'],edges: ['edge-1'],});
Remove node data.
removeNodeData(ids: ID[] | ((data: NodeData[]) => ID[])): void;
Parameters:
Return Value:
Example:
graph.removeNodeData(['node-1', 'node-2']);
Remove edge data.
removeEdgeData(ids: ID[] | ((data: EdgeData[]) => ID[])): void;
Parameters:
Return Value:
Example:
graph.removeEdgeData(['edge-1']);
Remove combo data.
removeComboData(ids: ID[] | ((data: ComboData[]) => ID[])): void;
Parameters:
Return Value:
Example:
graph.removeComboData(['combo-1']);
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:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
data | Element data to update or a function returning element data | PartialGraphData | ((prev: GraphData) => PartialGraphData) | - | ✓ |
Return Value:
Example:
graph.updateData({nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }],edges: [{ id: 'edge-1', style: { lineWidth: 2 } }],});
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:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
data | Node data to update or a function returning node data | NodeData[] | (prev: NodeData[]) => NodeData[] | - | ✓ |
Return Value:
Example:
graph.updateNodeData([{ id: 'node-1', style: { x: 100, y: 100 } }]);
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:
Example:
graph.updateEdgeData([{ id: 'edge-1', style: { lineWidth: 2 } }]);
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:
Parameter | Description | Type | Default | Required |
---|---|---|---|---|
data | Combo data to update or a function returning combo data | ComboData[] | (prev: ComboData[]) => ComboData[] | - | ✓ |
Return Value:
Example:
graph.updateComboData([{ id: 'combo-1', style: { x: 100, y: 100 } }]);
Element ID type.
type ID = string;
Multiple element ID type.
interface DataID {nodes?: ID[];edges?: ID[];combos?: ID[];}
G6 graph data type.
interface GraphData {nodes?: NodeData[];edges?: EdgeData[];combos?: ComboData[];}
Node data type.
interface NodeData {id: string; // Node IDtype?: string; // Node typedata?: Record<string, any>; // Node datastyle?: Record<string, any>; // Node stylestates?: string[]; // Initial node statescombo?: string; // Belonging combochildren?: string[]; // Array of child node IDs}
For detailed type definitions, please refer to Node Data.
Edge data type.
interface EdgeData {source: string; // Source IDtarget: string; // Target IDid?: string; // Edge IDtype?: string; // Edge typedata?: Record<string, any>; // Edge datastyle?: Record<string, any>; // Edge stylestates?: string[]; // Initial edge states}
For detailed type definitions, please refer to Edge Data.
Combo data type.
interface ComboData {id: string; // Combo IDtype?: string; // Combo typedata?: Record<string, any>; // Combo datastyle?: Record<string, any>; // Combo stylestates?: string[]; // Initial combo statescombo?: string; // Parent combo ID}
For detailed type definitions, please refer to Combo Data.