如何更新节点或边的样式

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

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