我正在使用 Vue 3 和 antv/G6,当我绘制图表(带有工具提示)、销毁图表并重绘它时,工具提示会消失。这是一个最小的工作示例。我只展示了 Vue 代码。如果需要,我也可以提供 javascript 代码来操作图表。任何见解都值得赞赏。
<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>