(G6)图谱重新获取数据后之前的图未被清除掉

(G6)图谱重新获取数据后之前的图未被清除掉

项目场景

数据中台智能问答搜索结果展示
第一次正常，第二次点击搜索后，两次的图都在

效果：

原因:

选取元素可以看到有两个canvas，前一次的未被销毁调

方法：

思路：在data中定义graph，可以将初始的Graph存在里边，在后续初始之前都先销毁前一次的图。

  props: [ "searchEngRes"], //父组件传的图数据
  data() {
    return { 
      graph: null, //定义graph
    };
  },
  watch: { //父组件数据改变子组件及时更新
    searchEngRes(newVal, oldVal) {
      this.searchEngRes = newVal; 
      newVal && this.tupuShow();
    },
  },
  methods: { 
    tupuShow() {
      //1.判断this.graph是否存在，若存在就销毁
      if (this.graph) {
        this.graph.destroy();
      }
      //2.新的graph
      this.graph = new G6.Graph({
        container: "result-graph",
        width: 1000,
        height: 350,
        modes: {
          default: ["zoom-canvas", "drag-canvas", "drag-node"],
        }, 
        ...
      }); 
      
      // 3.配置数据源，渲染
      this.graph.data(this.visualData);
      this.graph.render();  
    },

  }

最终效果：

扩展
例二：有时候图谱数据格式是对象数组，则需在重新赋值前将其初始化，销毁才能生效。

  data() {
    return { 
      graph: null, //定义graph             
      graphData: {
        nodes: [],
        edges: [],
      }, 
    };
  },

this.leftData.nodes = []; //初始化节点
this.leftData.edges = []; //初始化边
this.tupuGraph() //调取图谱方法