G6 提供了三种修改节点样式的方法。

实例化Graph

实例化 Graph 时，可以通过在 defaultNode 或 defaultEdge 中指定 **style** 样式属性。

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

数据中指定style

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

使用 update / updateItem

使用 update / updateItem 更新节点或边。

  1. graph.updateItem(node, {
  2.   // 节点的样式
  3.   style: {
  4.       stroke: 'blue'
  5.   }
  6. })

想要知道节点都支持哪些属性样式，请👉参数节点支持的属性。