Antv G6动态更新自定义节点数据

背景

由于公司项目需求，最近研究了一下使用蚂蚁的antv G6来构建拓扑图。

成果实例

由于很多个性需求，所以图中的各种edge和node都是使用G6.registerNode和G6.registerEdge两个方法来自定义的。下面贴一下我自定义节点和边的代码片段。

1.  
   G6.registerNode(item.iconName, {
2.  
   draw(cfg, group) {
3.  
   if (item.iconName === 'warning1') {
4.  
   // 警报灯使用字体图标（制作闪烁动画）
5.  
   // 定义字体图标
6.  
   const keyShape = group.addShape('text', {
7.  
   attrs: {
8.  
   x: 0,
9.  
   y: 0,
10.  
    fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
11.  
    textAlign: 'center',
12.  
    textBaseline: 'middle',
13.  
    text: '\ue60e', // 具体图标
14.  
    fontSize: item.size,
15.  
    fill: '#eaa153'
16.  
    },
17.  
    // must be assigned in G6 3.3 and later versions. it can be any value you want
18.  
    name: item.type
19.  
    })
20.  
    // 添加闪烁动画
21.  
    keyShape.animate(
22.  
    (ratio) => {
23.  
    const color = ratio > 0.5 ? '#eaa153' : '#f83f3f'
24.  
    return {
25.  
    fill: color
26.  
    }
27.  
    },
28.  
    {
29.  
    repeat: true, // 动画重复
30.  
    duration: 1000,
31.  
    easing: 'easeLinear'
32.  
    }
33.  
    )
34.  
     
35.  
    // 强制刷新图标（默认情况刷新页面，图标会变成小方框）
36.  
    setTimeout(() => {
37.  
    keyShape.attr({})
38.  
    }, 0)
39.  
     
40.  
    return keyShape
41.  
    } else if (item.type === 9) {
42.  
    // 文本框
43.  
    const keyShape = group.addShape('text', {
44.  
    attrs: {
45.  
    x: 0,
46.  
    y: 0,
47.  
    text: '文本框节点',
48.  
    fontSize: item.size,
49.  
    fill: '#FFF'
50.  
    },
51.  
    name: 'text-box'
52.  
    })
53.  
    return keyShape
54.  
    } else {
55.  
    // 普通图片节点
56.  
    const keyShape = group.addShape('image', {
57.  
    attrs: {
58.  
    x: -(item.width / 2),
59.  
    y: -(item.height / 2),
60.  
    height: item.height,
61.  
    width: item.width,
62.  
    img: require(`@/assets/process_diagram_images/${item.iconName}.svg`)
63.  
    },
64.  
    // must be assigned in G6 3.3 and later versions. it can be any value you want
65.  
    name: item.type
66.  
    })
67.  
    // 给风扇添加转动动画
68.  
    if (item.type === 3) {
69.  
    keyShape.animate(
70.  
    (ratio) => {
71.  
    const toMatrix = G6.Util.transform(
72.  
    [1, 0, 0, 0, 1, 0, 0, 0, 1],
73.  
    [['r', ratio * Math.PI * 4]]
74.  
    )
75.  
    return {
76.  
    matrix: toMatrix
77.  
    }
78.  
    },
79.  
    {
80.  
    repeat: true, // 动画重复
81.  
    duration: 3000,
82.  
    easing: 'easeLinear'
83.  
    }
84.  
    )
85.  
    }
86.  
    return keyShape
87.  
    }
88.  
    },
89.  
    // 自定义选中状态
90.  
    setState(name, value, item) {
91.  
    const group = item.getContainer()
92.  
    const shape = group.get('children')[0]
93.  
    if (name === 'selected') {
94.  
    if (value) {
95.  
    shape.attr('shadowBlur', 6)
96.  
    shape.attr('shadowColor', '#00a5fc')
97.  
    } else {
98.  
    shape.attr('shadowBlur', 0)
99.  
    shape.attr('shadowColor', 'transparent')
100.  
     }
101.  
     }
102.  
     }
103.  
     }
104.  
     )

1.  
   G6.registerEdge(
2.  
   'pipeLine',
3.  
   {
4.  
   afterDraw(cfg, group) {
5.  
   const shape = group.get('children')[0]
6.  
   shape.attr('stroke', 'rgba(255,255,255,0.4)')
7.  
   // 添加管线白底
8.  
   const startPoint = shape.getPoint(0)
9.  
   const endPoint = shape.getPoint(1)
10.  
    group.addShape('path', {
11.  
    attrs: {
12.  
    path: [
13.  
    ['M', startPoint.x, startPoint.y],
14.  
    ['L', endPoint.x, endPoint.y]
15.  
    ],
16.  
    stroke: 'rgb(229,229,229)',
17.  
    lineWidth: 8
18.  
    },
19.  
    // must be assigned in G6 3.3 and later versions. it can be any value you want
20.  
    name: 'line-bg'
21.  
    })
22.  
    // 添加流动动画
23.  
    const flowPath = group.addShape('path', {
24.  
    attrs: {
25.  
    path: [
26.  
    ['M', startPoint.x, startPoint.y],
27.  
    ['L', endPoint.x, endPoint.y]
28.  
    ],
29.  
    stroke: item.color,
30.  
    lineWidth: 6
31.  
    },
32.  
    // must be assigned in G6 3.3 and later versions. it can be any value you want
33.  
    name: 'line-flow'
34.  
    })
35.  
    // 定义流向动画
36.  
    const lineDash = [10, 10, 10, 10]
37.  
    let index = 0
38.  
    flowPath.animate(
39.  
    () => {
40.  
    index = 0.3
41.  
    if (index > 40) {
42.  
    index = 0
43.  
    }
44.  
    const res = {
45.  
    lineDash,
46.  
    lineDashOffset: -index
47.  
    }
48.  
    // returns the modified configurations here, lineDash and lineDashOffset here
49.  
    return res
50.  
    },
51.  
    {
52.  
    repeat: true, // whether executes the animation repeatly
53.  
    duration: 3000 // the duration for executing once
54.  
    })
55.  
    },
56.  
    update: undefined
57.  
    },
58.  
    'line' // extend the built-in edge 'cubic'
59.  
    )

问题

根据需求，需要动态更新节点（node）和边（edge）的样式，比如需要动态修改一个文本节点的文本内容或者动态修改edge的颜色。在修改edge颜色的时候我使用的方法是通过graph.findById方法先查找到对应的节点，在通过点属性直接修改对应的属性值（最后不要忘了使用refreshItem函数重新渲染该元素）

1.  
   const el = this.graph.findById('edgeId')
2.  
   // 修改管道颜色(背景)
3.  
   el._cfg.model.style.stroke = 'rgba(99,99,99,0.77)'
4.  
   // 重新渲染
5.  
   this.graph.refreshItem(el)

但是，我想通过同样的方式修改文本框内容时候，却怎么也不生效

1.  
   const el = this.graph.findById('nodeId')
2.  
   // 修改文本内容
3.  
   el._cfg.keyshape.attrs.text = '我是变化后的文本'
4.  
   // 重新渲染
5.  
   this.graph.refreshItem(el)

最后通过反复阅读官方关于自定义节点部分的文档，终于发现了问题所在

换句话说，我在自定义edge时，使用的是afterDraw方法，并且继承了内置元素line的属性，所以在更新时他会执行line这个内置元素的update方法（具体实现请自行查阅）去修改我们edge数据，但是在我在自定义节点时使用的时使用的是draw方法，并且没有继承内置元素，所以在更新时，会重新执行draw这个方法，执行同样的方法，节点数据当然不会发生改变了。

解决方法

 在自定义节点时，需要自己去定义update这个方法，我的代码如下

1.  
   update(cfg, node) {
2.  
   // 若未指定registerNode的第三个参数并且未定义update方法时，则节点更新时会执行 draw 方法，所有图形清除重绘
3.  
   if (item.type === 9 && cfg.attrs) {
4.  
   // 定义更新文本节点的方法
5.  
   node.get('keyShape').attrs.text = cfg.attrs.text
6.  
   node.get('keyShape').attrs.fill = cfg.attrs.fill
7.  
   node.get('keyShape').attrs.font = `normal normal normal ${cfg.attrs.fontSize}px sans-serif`
8.  
   node.get('keyShape').attrs.fontSize = cfg.attrs.fontSize
9.  
   }
10.  
    },

最后在动态更新时，只需要使用graph.updateItem修改节点的数据即可

1.  
   // 动态刷新文本框的节点的内容
2.  
   refreshTextBox(params) {
3.  
   const { id, text, fontSize, fill, variation } = params
4.  
   const node = this.graph.findById(id)
5.  
   // fontSize参数必须为数字
6.  
   this.graph.updateItem(node, {
7.  
   attrs: {
8.  
   text: text || '文本内容出错',
9.  
   fontSize: fontSize || 14,
10.  
    fill: fill || '#FFF',
11.  
    variation: variation || 'test'
12.  
    }
13.  
    })
14.  
    }

核心

解决方案的核心就是在自定义节点时使用update这个方法，另外大家在使用第三方插件时，遇到问题一定要去多阅读文档，答案或许就在文档中。

这篇好文章是转载于：学新通技术网