antV G6 节点的配置方式总结
配置节点的方式
配置节点的方式有四种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置，自定义节点时加入配置项参数。
这几种配置方法可以同时使用，
优先级：使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置 > 自定义节点时配置
即有相同的配置项时，
优先级高的方式将会覆盖优先级低的。
⚠️ 注意: 除 id、label 应当配置到每个节点数据中外，
其余的 节点的通用属性 以及各个节点类型的特有属性（见内置节点类型）均支持这三种配置方式。
自定义节点时，G6.registerNode(‘node-name’, {options: {}}),options里可以写配置
以上四种的具体配置方式如下
1.使用graph.node()
-
该方法必须在 render 之前调用，否则不起作用；
-
由于该方法优先级最高，将覆盖其他地方对节点的配置，这可能将造成一些其他配置不生效的疑惑；
-
该方法在增加元素、更新元素时会被调用，如果数据量大、每个节点上需要更新的内容多时，可能会有性能问题。
graph.node((node) => {
return {
id: node.id,
type: 'rect',
style: {
fill: 'blue',
},
};
});
2.在数据中动态配置
const data = {
nodes: [
{
id: "node",
x: 200,
y: 200,
label: "Hello Node",
style: {
// 配置keyShape样式
fill: "orange"
},
labelCfg: {
// 配置文本shape
style: {
fill: "white"
}
},
stateStyles: {
// 配置不同状态下的样式
hover: {
fill: "black",
// 配置文本在该状态下的样式
//
'text-shape': {
fill: "red"
}
}
}
}
],
edges: [
... // 边
]
}
3.实例化图时全局配置
const graph = new G6.Graph({
container: 'container',
width,
height,
fitCenter: true,
modes: {
default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
},
defaultNode: {
type: 'sunset',
size: 40,
style: {
fill: '#bae637',
stroke: '#eaff8f',
lineWidth: 1,
radius: 10,
},
labelCfg: {
style: {
fill: 'red'
}
}
},
nodeStateStyles: {
hover: {
lineWidth: 5,
stroke: "blue",
'text-shape': {
fill: "blue"
}
},
},
labelStateStyles: {
hover: {
fill: "blue"
}
}
});
4.在自定义节点的options中配置
G6.registerNode('sunset', {
options: {
size: 60,
style: {
fill: "orange"
},
labelCfg: {
},
stateStyles: {
hover: {
//...
}
}
},
}, 'rect')
在 G6 中，有三种方式配置不同状态的样式：
- 在实例化 Graph 时，通过
nodeStateStyles和edgeStateStyles对象定义； - 在节点/边数据中，在
stateStyles对象中定义状态； - 在自定义节点/边时，在 options 配置项的
stateStyles对象中定义状态。
可为二值/多值状态设置 keyShape 样式以及其他子图形的样式。
⚠️ 注意: 多值状态和除 keyShape 以外的子图形状态样式设置在 V3.4 后支持。
hover: {
fill: '#d3adf7',
// name 为 shape-name1 的子图形在该状态值下的样式
// 比如为多状态下的文本配置，可通过api方法查看默认文本shape的名字为"text-shape"
'text-shape': {
fontSize: 15
},
},