如何更新文本样式

在 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. });

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