Notes on pit mining
1. Axios gets data asynchronously
The getData method was originally intended to run in the onBeforeMount life cycle and the draw method in the onMounted life cycle. Get (‘ draw ‘, ‘axios.get’, ‘draw’, ‘axios.get’);
2. Data access problems of Reactive
const data: any = reactive({ nodes: [].edges: []}); data.nodes = [...res.data.nodes]; data.edges = [...res.data.edges];Copy the code
If res.data.nodes has a package [] inside it, use the extension operator…
3. Graphics rendering problem after data replacement of G6
The instantiated object generated by G6 needs to be set as a global object
let graph:any = reactive(Object)
graph = new G6.Graph({
...
})
Copy the code
As long as the instantiated objects are not the same, subsequent renderings will present two shapes, causing a new image to be drawn again instead of updating the data.
4. Add the code related to the node
function add(this: any) {
let newNode = reactive({
id: num.value.toString(),
label: (num.value+1).toString(),
});
let newEdges = reactive({
source: (num.value-1).toString(),
target: num.value.toString(),
label: "Test"
});
data.nodes.push(newNode);
data.edges.push(newEdges);
console.log(data, "Update data");
num.value = num.value + 1;
// Render again
graph.render();
}
Copy the code