g6/packages/site/docs/apis/data/DataIntro.zh.md

title	order
数据使用简介	0

在 G6 5.0 中，为了更好地做好数据隔离，控制数据映射，全新定义规范数据流如下：

User Data 用户输入数据

用户输入的原始数据，是节点、边、群组的集合，可以是图数据GraphData或树数据TreeData。

数据输入的方式有：

1. 图实例化时传入

实例化完成后自动渲染图。

const data = {
  nodes: [], // 节点集
  edges: [], // 边集
  combos: [], // 群组集
};
const graph = new Graph({
  // ... 其他配置
  data,
});

2. 调用 API 传入数据

图实例读取并渲染数据。

graph.read(data);

3. 调用 API 更新数据

• 更新全量数据 changeData

graph.changeData(data);

• 新增数据 addData

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

• 更新部分已有数据 updateData

const nodes = [
  { id: 'node-1', data: { xx: 1 } },
  { id: 'node-2', data: { xx: 2 } },
];
// 将更新已存在的 node-1 和 node-2 的上述属性
graph.updateData('node', nodes);

• 删除部分数据 removeData

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

Transforms 数据转换

对用户数据进行转换和处理，例如属性字段转换、数据过滤、数据聚合等。转换器可以根据实际需求进行自定义配置，以便将输入数据转换为适合后续处理的内部数据格式。

使用图配置中的 transforms 字段来配置转换器。transforms 接受转换器数组，G6 在读取用户数据时，将按照 transforms 中转换器的顺序执行数据转换，前一个转换器的结果将作为下一个转换器的输入。Transforms DEMO.

Inner Data 内部数据

内部数据是在数据转换后得到的数据，用作后续数据映射的输入，也用于其他数据处理和操作。

:::warning{title=注意} 在 G6 读取用户数据后，后续用户获取和修改的都是内部数据 :::

Mappers 数据映射

Mappers 用于将内部数据映射到视觉通道。它们根据预定义的规则和配置，将内部数据映射到特定的节点样式、边样式、标签等可视化属性上。Mappers 支持 JSON 格式的配置，也支持函数式的配置。

用户通过图配置中的 node、edge、combo 属性来配置节点、边、群组的映射规则。Mappers DEMO

Display Data 渲染数据

经过 Mappers 映射生成的最终用于渲染的数据，它包含了节点的位置、各个图形的样式等，用于最终的图形渲染和展示。

:::warning{title=注意} 只有 G6 可以访问渲染数据，用户无法直接获取和修改渲染数据 :::