G6 提供了一套全面的 数据 操作 API,覆盖了图数据从查询、修改到更新的完整生命周期。
获取图的完整数据。
getData(): Required<GraphData>;
返回值:
类型: GraphData
描述: 返回包含所有节点、边和组合数据的完整图数据
示例:
const graphData = graph.getData();console.log('节点数据:', graphData.nodes);console.log('边数据:', graphData.edges);console.log('组合数据:', graphData.combos);
获取节点数据,支持三种调用方式。
// 获取所有节点数据getNodeData(): NodeData[];// 获取单个节点数据getNodeData(id: ID): NodeData;// 批量获取多个节点数据getNodeData(ids: ID[]): NodeData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 节点 ID | string | - | |
ids | 节点 ID 数组 | string[] | - |
返回值:
示例:
// 获取所有节点const nodes = graph.getNodeData();// 获取单个节点const node = graph.getNodeData('node1');console.log('节点位置:', node.style.x, node.style.y);// 获取多个节点const [node1, node2] = graph.getNodeData(['node1', 'node2']);
获取边数据,支持三种调用方式。
// 获取所有边数据getEdgeData(): EdgeData[];// 获取单条边数据getEdgeData(id: ID): EdgeData;// 批量获取多条边数据getEdgeData(ids: ID[]): EdgeData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 边 ID | string | - | |
ids | 边 ID 数组 | string[] | - |
返回值:
示例:
// 获取所有边const edges = graph.getEdgeData();// 获取单条边const edge = graph.getEdgeData('edge1');console.log('边的起点和终点:', edge.source, edge.target);// 获取多条边const [edge1, edge2] = graph.getEdgeData(['edge1', 'edge2']);
获取组合数据,支持三种调用方式。
// 获取所有组合数据getComboData(): ComboData[];// 获取单个组合数据getComboData(id: ID): ComboData;// 批量获取多个组合数据getComboData(ids: ID[]): ComboData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 组合 ID | string | - | |
ids | 组合 ID 数组 | string[] | - |
返回值:
示例:
// 获取所有组合const combos = graph.getComboData();// 获取单个组合const combo = graph.getComboData('combo1');console.log('组合包含的节点:', combo.children);// 获取多个组合const [combo1, combo2] = graph.getComboData(['combo1', 'combo2']);
获取单个元素数据,支持两种调用方式。
⚠️ 注意: 此 API 直接获取元素的数据而不必考虑元素类型。
// 获取单个元素数据getElementData(id: ID): ElementDatum;// 批量获取多个元素数据getElementData(ids: ID[]): ElementDatum[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 元素 ID | string | - | |
ids | 元素 ID 数组 | string[] | - |
返回值:
示例:
const element = graph.getElementData('node-1');console.log('元素数据:', element);const elements = graph.getElementData(['node-1', 'edge-1']);console.log('多个元素数据:', elements);
获取指定状态下的元素数据,支持三种调用方式。
// 获取指定状态下的节点数据getElementDataByState(elementType: 'node', state: string): NodeData[];// 获取指定状态下的边数据getElementDataByState(elementType: 'edge', state: string): EdgeData[];// 获取指定状态下的组合数据getElementDataByState(elementType: 'combo', state: string): ComboData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
elementType | 元素类型 | 'node' | 'edge' | 'combo' | - | ✓ |
state | 状态 | string | - | ✓ |
返回值:
示例:
const selectedNodes = graph.getElementDataByState('node', 'selected');console.log('选中的节点:', selectedNodes);const selectedEdges = graph.getElementDataByState('edge', 'selected');console.log('选中的边:', selectedEdges);const selectedCombos = graph.getElementDataByState('combo', 'selected');console.log('选中的组合:', selectedCombos);
内置状态:
'selected'
'highlight'
'active'
'inactive'
'disabled'
获取节点或组合的一跳邻居节点数据。
getNeighborNodesData(id: ID): NodeData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 节点或组合的 ID | string | - | ✓ |
返回值:
示例:
const neighbors = graph.getNeighborNodesData('node-1');console.log('邻居节点:', neighbors);
获取节点或组合关联边的数据。
getRelatedEdgesData(id: ID, direction?: EdgeDirection): EdgeData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 节点或组合的 ID | string | - | ✓ |
direction | 边的方向 | 'in' | 'out' | 'both' | - |
返回值:
示例:
const relatedEdges = graph.getRelatedEdgesData('node-1');console.log('关联边:', relatedEdges);
获取节点或组合的父元素数据。
getParentData(id: ID, hierarchy: HierarchyKey): NodeLikeData | undefined;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 节点或组合的 ID | string | - | ✓ |
hierarchy | 指定层级关系类型 | 'tree' | 'combo' | - |
返回值:
示例:
// 获取树图中节点的父节点const treeParent = graph.getParentData('node1', 'tree');// 获取组合中节点的父组合const comboParent = graph.getParentData('node1', 'combo');
获取节点或组合的子元素数据。
getChildrenData(id: ID): NodeLikeData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 节点或组合的 ID | string | - | ✓ |
返回值:
示例:
// 获取组合的子元素const children = graph.getChildrenData('combo1');console.log('子节点数量:', children.length);// 处理每个子元素children.forEach((child) => {console.log('子元素ID:', child.id);});
获取节点或组合的所有祖先元素数据。
getAncestorsData(id: ID, hierarchy: HierarchyKey): NodeLikeData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 节点或组合的 ID | string | - | ✓ |
hierarchy | 指定层级关系类型 | 'tree' | 'combo' | - | ✓ |
返回值:
示例:
// 获取树图中节点的所有祖先节点const treeAncestors = graph.getAncestorsData('node1', 'tree');console.log('祖先节点路径:',treeAncestors.map((node) => node.id),);// 获取组合中节点的所有父组合const comboAncestors = graph.getAncestorsData('node1', 'combo');
获取节点或组合的所有后代元素数据。
getDescendantsData(id: ID): NodeLikeData[];
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
id | 节点或组合的 ID | string | - | ✓ |
返回值:
示例:
// 获取节点的所有后代const descendants = graph.getDescendantsData('node1');console.log('后代数量:', descendants.length);// 处理所有后代元素descendants.forEach((descendant) => {console.log('后代元素ID:', descendant.id);});
设置图的完整数据。
setData(data: GraphData | ((prev: GraphData) => GraphData)): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
data | 新的图数据或返回新图数据的函数 | GraphData | ((prev: GraphData) => GraphData) | - | ✓ |
示例:
// 直接设置数据graph.setData({nodes: [{ id: 'node1', style: { x: 100, y: 100 } },{ id: 'node2', style: { x: 200, y: 200 } },],edges: [{ id: 'edge1', source: 'node1', target: 'node2' }],});// 使用函数式增量更新:获取当前图数据,并返回新的图数据graph.setData((prev) => ({...prev,nodes: [...prev.nodes, { id: 'node3', style: { x: 300, y: 300 } }],}));
新增元素数据。
addData(data: GraphData | ((prev: GraphData) => GraphData)): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
data | 需要添加的图数据或返回新图数据的函数 | GraphData | ((prev: GraphData) => GraphData) | - | ✓ |
示例:
graph.addData({nodes: [{ id: 'node-1' }, { id: 'node-2' }],edges: [{ source: 'node-1', target: 'node-2' }],});
新增节点数据。
addNodeData(data: NodeData[] | ((prev: NodeData[]) => NodeData[])): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
data | 要添加的节点数据或返回节点数据的函数 | NodeData[] | (prev: NodeData[]) => NodeData[] | - | ✓ |
示例:
// 添加单个节点graph.addNodeData([{id: 'node1',style: { x: 100, y: 100 },data: { label: '节点 1' },},]);// 批量添加节点graph.addNodeData([{ id: 'node2', style: { x: 200, y: 200 } },{ id: 'node3', style: { x: 300, y: 300 } },]);// 函数式添加graph.addNodeData((prev) => [...prev, { id: 'node4', style: { x: 400, y: 400 } }]);
新增边数据。
addEdgeData(data: EdgeData[] | ((prev: EdgeData[]) => EdgeData[])): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
data | 要添加的边数据或返回边数据的函数 | EdgeData[] | ((prev: EdgeData[]) => EdgeData[]) | - | ✓ |
示例:
// 添加单条边graph.addEdgeData([{id: 'edge1',source: 'node1',target: 'node2',data: {weight: 1,label: '关系',},},]);// 批量添加边graph.addEdgeData([{ id: 'edge2', source: 'node2', target: 'node3' },{ id: 'edge3', source: 'node3', target: 'node1' },]);// 函数式添加graph.addEdgeData((prev) => [...prev, { id: 'edge4', source: 'node1', target: 'node4' }]);
新增组合数据。
addComboData(data: ComboData[] | ((prev: ComboData[]) => ComboData[])): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
data | 要添加的组合数据或返回组合数据的函数 | ComboData[] | (prev: ComboData[]) => ComboData[] | - | ✓ |
示例:
graph.addComboData([{ id: 'combo1', children: ['node1', 'node2'] }]);
为树图节点添加子节点数据。
⚠️ 注意: 为组合添加子节点使用 addNodeData / addComboData 方法。
addChildrenData(parentId: ID, childrenData: NodeData[]): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
parentId | 父节点 ID | string | - | ✓ |
childrenData | 子节点数据 | NodeData[] | - | ✓ |
示例:
graph.addChildrenData('node1', [{ id: 'node2' }]);
删除元素数据。
removeData(ids: DataID | ((data: GraphData) => DataID)): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
ids | 要删除的元素 ID 或返回元素 ID 的函数 | DataID | ((data: GraphData) => DataID) | - | ✓ |
返回值:
示例:
graph.removeData({nodes: ['node-1', 'node-2'],edges: ['edge-1'],});
删除节点数据。
removeNodeData(ids: ID[] | ((data: NodeData[]) => ID[])): void;
参数:
返回值:
示例:
graph.removeNodeData(['node-1', 'node-2']);
删除边数据。
removeEdgeData(ids: ID[] | ((data: EdgeData[]) => ID[])): void;
参数:
返回值:
示例:
graph.removeEdgeData(['edge-1']);
删除组合数据。
removeComboData(ids: ID[] | ((data: ComboData[]) => ID[])): void;
参数:
返回值:
示例:
graph.removeComboData(['combo-1']);
更新元素数据。
⚠️ 注意: 只需要传入需要更新的数据即可,不必传入完整的数据。
updateData(data: PartialGraphData | ((prev: GraphData) => PartialGraphData)): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
data | 要更新的元素数据或返回元素数据的函数 | PartialGraphData | ((prev: GraphData) => PartialGraphData) | - | ✓ |
返回值:
示例:
graph.updateData({nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }],edges: [{ id: 'edge-1', style: { lineWidth: 2 } }],});
更新节点数据。
⚠️ 注意: 只需要传入需要更新的数据即可,不必传入完整的数据。
updateNodeData(data: NodeData[] | ((prev: NodeData[]) => NodeData[])): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
data | 要更新的节点数据或返回节点数据的函数 | NodeData[] | (prev: NodeData[]) => NodeData[] | - | ✓ |
返回值:
示例:
graph.updateNodeData([{ id: 'node-1', style: { x: 100, y: 100 } }]);
更新边数据。
⚠️ 注意: 只需要传入需要更新的数据即可,不必传入完整的数据。
updateEdgeData(data: (PartialEdgeData<EdgeData>[] | ((prev: EdgeData[]) => PartialEdgeData<EdgeData>[]))): void;
参数:
| 参数 | 描述 | 类型 | 默认值 | 必选 | | ---- | ---- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ---- | --- | --- | | |
返回值:
示例:
graph.updateEdgeData([{ id: 'edge-1', style: { lineWidth: 2 } }]);
更新组合数据。
⚠️ 注意: 只需要传入需要更新的数据即可,不必传入完整的数据。
updateComboData(data: (ComboData[] | ((prev: ComboData[]) => ComboData[]))): void;
参数:
参数 | 描述 | 类型 | 默认值 | 必选 |
---|---|---|---|---|
data | 要更新的组合数据或返回组合数据的函数 | ComboData[] | (prev: ComboData[]) => ComboData[] | - | ✓ |
返回值:
示例:
graph.updateComboData([{ id: 'combo-1', style: { x: 100, y: 100 } }]);
元素 ID 类型。
type ID = string;
多个元素 ID 类型。
interface DataID {nodes?: ID[];edges?: ID[];combos?: ID[];}
G6 图数据类型。
interface GraphData {nodes?: NodeData[];edges?: EdgeData[];combos?: ComboData[];}
节点数据类型。
interface NodeData {id: string; // 节点 IDtype?: string; // 节点类型data?: Record<string, any>; // 节点数据style?: Record<string, any>; // 节点样式states?: string[]; // 节点初始状态combo?: string; // 所属组合children?: string[]; // 子节点 ID 数组}
详细类型定义请参考 节点数据。
边数据类型。
interface EdgeData {source: string; // 起点 IDtarget: string; // 终点 IDid?: string; // 边 IDtype?: string; // 边类型data?: Record<string, any>; // 边数据style?: Record<string, any>; // 边样式states?: string[]; // 边初始状态}
详细类型定义请参考 边数据。
组合数据类型。
interface ComboData {id: string; // 组合 IDtype?: string; // 组合类型data?: Record<string, any>; // 组合数据style?: Record<string, any>; // 组合样式states?: string[]; // 组合初始状态combo?: string; // 父组合 ID}
详细类型定义请参考 组合数据。