动态修改antv g6的节点的文字的颜色 通过cfg.nodes
时间: 2023-12-10 10:41:45 浏览: 36
要动态修改AntV G6的节点文字颜色,需要在 `cfg.nodes` 中指定节点的样式属性。具体步骤如下:
1. 在 `cfg.nodes` 中,指定 `style` 属性,其值为一个对象。
2. 在 `style` 对象中,指定 `label` 属性,其值为一个对象。
3. 在 `label` 对象中,指定 `fill` 属性,其值为一个表示文字颜色的字符串。
示例代码如下:
```javascript
const cfg = {
// 节点配置
nodes: [
{
id: 'node1',
label: '节点1',
x: 100,
y: 100,
// 指定样式属性
style: {
// 指定 label 属性
label: {
// 指定 fill 属性,即文字颜色
fill: '#ff0000'
}
}
}
],
// 边配置
edges: [
{
source: 'node1',
target: 'node2'
}
]
};
const graph = new G6.Graph({
container: 'mountNode',
width: 500,
height: 500,
defaultNode: {
size: 50
}
});
graph.data(cfg);
graph.render();
```
上述代码中,我们在 `cfg.nodes` 中指定了一个 `style` 属性,其值为一个对象,其中 `label` 属性指定了文字样式,`fill` 属性指定了文字颜色为红色。最后在渲染图形时,就能看到该节点的文字颜色变为了红色。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)