AntV G6 資料更新顯示

問題

最近將資料存到 MSSQL 的 Graph Table 之中，然後再取出資料透過 G6 图可视化引擎，只要給 起點、Label 及終點就可以把關係圖畫出來。
在 Button 的 Click 事件之中，取得資料，建立 graph ，給 graph 資料，呼叫 graph.render 來畫面關係圖。
但第 2 次資料有更新時，圖卻不會跟著更新，要怎麼解決呢?

解決

在 Button 的 Click 事件之中，取得資料，建立 graph ，給 graph 資料，呼叫 graph.render 來畫面關係圖

//const data = 依條件取得資料 ...
$("#btnSearch").click(function () {
  const graph = new G6.Graph({
    container: "mountNode",
    width: 800,
    height: 500,
  });
  graph.data(data);
  graph.render();
});

但是雖然資料有改變，但圖還是沒有更新。

後來參考 antv/g6 and react. How to update graph? ，建立全域的 graph 變數，當 graph 不是 null 時，再建立 G6.Graph 就可以正常更新圖了。

let graph = null;
//const data = 依條件取得資料 ...
$("#btnSearch").click(function () {
  if (!graph) {
    const graph = new G6.Graph({
      container: "mountNode",
      width: 800,
      height: 500,
    });
  }
  graph.data(data);
  graph.render();
});

參考資源

antv/g6 and react. How to update graph?
G6 图可视化引擎