Résumé des méthodes de configuration des nœuds antV G6
Comment configurer les nœuds
Il existe quatre façons de configurer les nœuds : configuration globale lors de l'instanciation du graphique, configuration dynamique dans les données, configuration à l'aide de la fonction graph.node(nodeFn) et ajout de paramètres d'élément de configuration lors de la personnalisation des nœuds.
Ces méthodes de configuration peuvent être utilisées en même temps,
Priorité : utilisez la configuration graph.node(nodeFn) > la configuration dynamique dans les données > la configuration globale lors de l'instanciation du graphique > la configuration lors de la personnalisation des nœuds
Autrement dit, lorsqu'il y a les mêmes éléments de configuration,
Les méthodes avec une priorité plus élevée remplaceront celles avec une priorité plus faible.
⚠️ Remarque : En plus de l'identifiant et de l'étiquette doivent être configurés dans les données de chaque nœud,
Les attributs généraux des nœuds restants et les attributs spécifiques de chaque type de nœud (voir types de nœuds intégrés) prennent tous en charge ces trois méthodes de configuration.
Lors de la personnalisation d'un nœud, G6.registerNode('node-name', {options : {}}), vous pouvez écrire la configuration dans les options
Les quatre méthodes de configuration spécifiques ci-dessus sont les suivantes
1. Utilisez graph.node()
-
Cette méthode doit être appelée avant le rendu, sinon elle ne fonctionnera pas ;
-
Étant donné que cette méthode a la priorité la plus élevée, elle écrasera la configuration des nœuds à d'autres endroits, ce qui peut faire douter que d'autres configurations ne prennent pas effet ;
-
Cette méthode sera appelée lors de l'ajout et de la mise à jour d'éléments. Si la quantité de données est importante et qu'il y a beaucoup de contenu à mettre à jour sur chaque nœud, il peut y avoir des problèmes de performances.
graph.node((node) => {
return {
id: node.id,
type: 'rect',
style: {
fill: 'blue',
},
};
});
2. Configuration dynamique dans les données
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. Configuration globale lors de l'instanciation du graphe
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. Configurer dans les options du nœud personnalisé
G6.registerNode('sunset', {
options: {
size: 60,
style: {
fill: "orange"
},
labelCfg: {
},
stateStyles: {
hover: {
//...
}
}
},
}, 'rect')
Dans G6, il existe trois manières de configurer les styles des différents états :
- Lors de l'instanciation de Graph, pass
nodeStateStylesetedgeStateStylesdéfinition d'objet ; - Dans les données de nœud/arête,
stateStylesles états sont définis dans des objets ; - Lors de la personnalisation d'un nœud/arc,
stateStylesdéfinissez l'état dans l'objet de l'élément de configuration des options.
Le keyShape peut être stylisé pour les états binaires/multivalués ainsi que pour d'autres sprites.
⚠️ Remarque : Les paramètres de style d'état à valeurs multiples et d'état de sous-graphique autres que keyShape sont pris en charge après la version 3.4.
hover: {
fill: '#d3adf7',
// name 为 shape-name1 的子图形在该状态值下的样式
// 比如为多状态下的文本配置，可通过api方法查看默认文本shape的名字为"text-shape"
'text-shape': {
fontSize: 15
},
},