3.6 KiB
| title | order |
|---|---|
| Data Introduction | 0 |
In G6 5.0, in order to better isolate data and control data mapping, the new specification for data flow is as follows:
User Data
The original data input by the user is a collection of nodes, edges, and combos, which can be graph data GraphData or tree data TreeData.
There are three ways to input data:
- Passing configuration when instantiating the graph
The graph is automatically rendered after instantiation.
const data = {
nodes: [], // Node collection
edges: [], // Edge collection
combos: [], // Combo collection
};
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 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: {} }]);
- 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 used to transform and process user data, such as attribute field transformation, data filtering, data aggregation, etc. Transformers can be customized according to actual needs to convert input data into internal data formats suitable for subsequent processing.
Use the transforms field in the graph configuration to configure the transformers. transforms accepts an array of transformers. When G6 reads user data, it will execute data transformation according to the order of transformers in transforms, and the result of the previous transformer will be used as the input of the next transformer. Transforms DEMO.
Inner Data
The inner data is the data obtained after data transformation, which is used as the input for subsequent data mapping, and is also used for other data processing and operations.
:::warning After G6 reads user data, subsequent users will get and modify the inner data. :::
Mappers
Mappers are used to map internal data to visual channels. They map internal data to specific node styles, edge styles, labels, and other visual properties according to predefined rules and configurations. Mappers support JSON format configuration as well as functional configuration.
Users configure the node, edge, and combo mapping rules through the node, edge, and combo properties in the graph configuration. Mappers DEMO
Display Data
The final data used for rendering generated by Mappers mapping, which contains the position of the node, the style of each shape, etc., is used for the final graph rendering and display.
:::warning Only G6 can access the rendering data, and users cannot directly get and modify the rendering data. :::