在 G6 中，可以通过以下三种方式更新文本样式。

实例化Graph

实例化Graph时，可以通过在defaultNode或defaultEdge中指定labelCfg属性修改文本的样式。

  1. const graph = new G6.Graph({
  2.     container: "mountNode",
  3.     width: 1000,
  4.     height: 800,
  5.     defaultNode: {
  6.       shape: "node",
  7.       labelCfg: {
  8.         style: {
  9.           fill: "#fff",
  10.           fontSize: 14
  11.         }
  12.       }
  13.     },
  14.     defaultEdge: {
  15.       shape: "line-with-arrow",
  16.       labelCfg: {
  17.         style: {
  18.           fill: "#fff",
  19.           fontSize: 14
  20.         }
  21.       }
  22.     }
  23.   });

数据中指定labelCfg

  1. const data = {
  2.     nodes: [
  3.     {
  4.         id: 'node1',
  5.       label: 'node1',
  6.       labelCfg: {
  7.           style: {
  8.             fill: '#fff',
  9.           fontSize: 12
  10.         }
  11.       }
  12.     }
  13.   ]
  14. }

使用update/updateItem

使用update/updateItem更新节点或边时，也可以更新节点或边上的文本。

  1. graph.updateItem(node, {
  2.   // 节点的样式
  3.   style: {
  4.       stroke: 'blue'
  5.   },
  6.   // 节点上文本的样式
  7.     labelCfg: {
  8.       style: {
  9.         fill: '#fff',
  10.       fontSize: 12
  11.     }
  12.   }
  13. })

想知道文本都可以设置哪些属性，请👉参考文本属性样式。