Scene
Recently, when using G6 TreeGrap to display tree structure data, the page has been stuttered and even crashed due to the large number of nodes. Finally, I had to consider loading nodes in a lazy way, and dynamically add child nodes to each click.
Implement code
(data, stack)
Update the data source and re-render the view based on the new data.
parameter
| name | type | Necessary | describe |
|---|---|---|---|
| data | Object | false | Graph data is an object including nodes and edges. If this parameter is not specified, re-render using the current data |
| stack | boolean | false | Whether the operation enters the undo & redo stack. When the enableStack is set to true when instantiating Graph, it will be automatically entered by default. After entering the stack, the undo & redo operation is supported. If it is not needed, set this parameter to false |
usage
const data = {
nodes: [
{
id: 'node1',
label: 'node1',
},
{
id: 'node2',
label: 'node2',
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
],
};
// graph is an instance of Graph(data);
// If this parameter is not specified, re-render using the data on the current graph();By assigning children to the current node and calling the() method
// .....
// Node click event("node:click", function (evt) {
const item = ;
const nodeId = ("id");
(nodeId);
const model = ();
const children = ;
if (!children || === 0) {
//Click on the node to obtain the lower node interface //...........
const parentData = (nodeId);
if (!) {
= [];
}
// If childData is an array, then the value is directly assigned to // If it is an object, use (obj) = childData;
();
}
});The above is the detailed content of the lazy loading of the G6 TreeGraph tree graph node. For more information about the lazy loading of the G6 TreeGraph tree graph node, please follow my other related articles!