I am working with Vue 3 and antv/G6, and have an issue with tooltips disappearing when I draw a graph (with tooltips), destroy the graph, and redraw it. Here is a minimal working example. I only show the Vue code. I can provide the javascript code to manipulate the graph as well if needed. Any insights are appreciated.
<template>
<div>
<h2>Hello World</h2>
<div id="mountGraph"></div>
</div>
</template>
<script>
import * as dp from "../Composition/delayPropagationGraphImpl.js";
import G6 from "@antv/g6";
import { onMounted } from "vue";
export default {
setup() {
let graphCreated = false;
let graph = false;
const graphConfiguration = dp.setupConfiguration({
container: "mountGraph",
width: "800",
height: "600",
defaultNodeSize: 40,
});
function drawGraph() {
const gNodes = [{ id: "1" }, { id: "2" }, { id: "3" }];
const gEdges = [
{ source: "1", target: "2" },
{ source: "1", target: "3" },
];
if (graphCreated) {
graph.destroy();
}
graph = new G6.Graph(graphConfiguration); // ERROR
graphCreated = true;
const data = { nodes: gNodes, edges: gEdges };
graph.data(data); // combines data and render
graph.render();
return;
}
onMounted(() => {
drawGraph();
drawGraph(); // <<< Tooltiops disappear
});
},
};
</script>