ANTV/G6 怎么按条件自定义节点颜色(Graphin)
一.当需求需要根据节点的类型来显示不同的颜色时，我们就可以自定义节点的颜色，通过后台返回的数据判断不同类型的节点显示不同的颜色
// 以下是自定义节点颜色重点
// 根据后台返回的数据，flag 为 'b' 的节点显示 “#fff” 颜色，其他默认显示 fill: “#ea7171” 颜色
graph.node(node => {
if (node.flag === 'b') {
return {
style:{
fill: '#fff',
stroke: '#ea7171'
}
}
}
return {
style: {
fill: '#2db7f5',
stroke: '#ea7171'
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
二、完整代码
import G6 from '@antv/g6';
const data = {
nodes: [
{
id: '0',
label: '0',
flag: 'b',
},
{
id: '1',
label: '1',
flag: 'b',
},
{
id: '2',
label: '2',
flag: 'a',
},
{
id: '3',
label: '3',
flag: 'b',
},
{
id: '4',
label: '4',
flag: 'a',
}
],
edges: [
{
source: '0',
target: '1',
},
{
source: '0',
target: '2',
},
{
source: '0',
target: '3',
},
{
source: '0',
target: '4',
},
],
};
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
container: 'container',
width,
height,
modes: {
default: ['drag-canvas', 'drag-node'],
},
layout: {
type: 'fruchterman',
gravity: 5,
speed: 5,
},
animate: true,
defaultNode: {
size: 30,
style: {
lineWidth: 2,
stroke: '#5B8FF9',
fill: '#C6E5FF',
},
},
defaultEdge: {
size: 2,
color: '#e2e2e2',
style: {
endArrow: {
path: 'M 0,0 L 8,4 L 8,-4 Z',
fill: '#e2e2e2',
},
},
},
});
// 以下是重点
graph.node(node => {
if (node.flag === 'b') {
return {
style:{
fill: '#fff',
stroke: '#ea7171'
}