0

我正在使用 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>
4

0 回答 0