4.0 KiB
| title | order |
|---|---|
| Data Intro | 0 |
In G6 v5, to better manage data isolation and control data mapping, the data flow is defined as follows:
在 G6 v5 中，为了更好地做好数据隔离，控制数据映射，全新定义规范数据流如下：
【User Data】 - Transforms -> 【Inner Data】 - Mappers -> 【Display Data】
Now let's discuss each stage of data and the transformation process.
User Data
The data type is GraphData or TreeData. User data is the original data provided by the user, which can be data from the business domain. It is a collection of nodes, edges, and combos. This data can come from external data sources or be generated by user interaction.
There are several ways to input user data:
- Passing configuration when instantiating the graph
The graph is automatically rendered after instantiation.
const data = {
nodes: [...],
edges: [...],
combos: [...]
}
const graph = new Graph({
// ... other configurations
data
})
- Calling API to input data
The graph reads and renders the data.
graph.read(data);
- Calling API to update data
- Updating the entire data changeData
graph.changeData(data);
- Adding partial data addData
graph.addData('node', [
{ id: 'newnode-1', data: {} },
{ id: 'newnode-2', data: {} },
]);
graph.addData('edge', [{ id: 'newedge-1', source: 'newnode-2', target: 'newnode-1', data: {} }]);
- Updating existing data updateData
const nodes = [
{ id: 'node-1', data: { xx: 1 } },
{ id: 'node-2', data: { xx: 2 } },
];
// Update the above properties of 'node-1' and 'node-2'
graph.updateData('node', nodes);
- Removing partial data removeData
graph.removeData('node', ['node-1', 'node-2']);
Transforms
Transforms are functional modules used to transform and process user input data. They can perform various operations such as attribute field transformation, data filtering, and data aggregation. Transformations can be customized based on specific requirements to convert input data into internal data formats suitable for subsequent processing.
Transformers are configured using the transforms field in the graph configuration. The transforms field accepts an array of transformer configurations. When G6 reads user data, it executes the data transformations in the order specified in transforms, with the output of the previous transformer being the input of the next one. A DEMO for Transforms.
Inner Data
Inner data is the data generated after the transformation stage in the Transforms. It is the data that has been processed and transformed by transformers. Inner data can be used as input for subsequent data mapping or for other data processing and operations. After G6 reads user data, any data fetched or modified is done on the inner data.
Mappers
Mappers are used to map the inner data to specific visual channels. They map the internal data to specific node styles, edge styles, labels, and other visual attributes based on predefined rules and configurations. Mappers support JSON-based configurations as well as function-based configurations.
Mappers are configured using the node, edge, or combo fields in the graph configuration. The types of mappers can be found in specification.node, specification.edge, specification.combo. A Demo for Mappers.
Display Data
Display data is the final data generated after being processed by the data mappers. You will not directly access this data anywhere. It includes node positions, styles for various graphics, and other information needed for final rendering and display of the graph.