如何更新节点或边的样式

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

实例化Graph

实例化 Graph 时,可以通过在 defaultNodedefaultEdge 中指定 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. });

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