J'utilise cytoscape.js pour montrer les relations entre les noeuds. Je souhaite créer différentes étiquettes élégantes pour un noeud. Je veux plus d'étiquettes élégantes compliquées, puis dans le cytoscape.org official example.Comment ajouter une étiquette html au noeud de graphe de cytoscape
Comment puis-je le faire?
Sample image de mon problème: 
D'abord, il doit y avoir une zone pour tracer le graphe. Ajoutez un tag à index.html, puis dans la section body, ajoutez un élément div nommé "cy", comme ceci:. Cela crée le corps de la page Web, qui à son tour contient un élément div nommé cy. Nommer l'élément facilite l'accès et la modification de cet élément pour stylisation et passage à Cytoscape.js.
index.html devrait maintenant ressembler à ceci:
<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src='cytoscape.js'></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Ensuite, le style de la zone graphique doit être légèrement modifié via CSS (mettre un graphique dans un élément div 0 zone est plutôt sans intérêt). Pour ce faire, ajoutez le code CSS suivant entre et:
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
Comment rendre le graphique plus agréable? Cytoscape.js fournit une multitude d'options de style pour changer l'apparence du graphique. L'initialisation du graphique peut être modifié pour modifier les options de style par défaut, comme suit:
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}],
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red'
}
}]
});
Ensuite affiche des étiquettes dans le graphique afin que les noeuds peuvent être identifiés. Les étiquettes sont ajoutées via la propriété 'label' du style. Puisque les étiquettes sont déjà fournies (via la propriété id des données), nous les utiliserons. Si d'autres propriétés de données sont fournies, telles que le prénom, elles peuvent être utilisées à la place.
style: [
{
selector: 'node',
style: {
shape: 'hexagon',
'background-color': 'red',
label: 'data(id)'
}
}]
Le dernier composant commun d'un graphique dans Cytoscape.js est la disposition. Comme le style, les éléments et les conteneurs, la mise en page est également spécifiée en tant que partie de l'objet transmis à cytoscape pendant la construction. Pour l'objet cy existant, ajouter (après éléments):
layout: {
name: 'grid'
}
vérifier, il vous aidera -http://blog.js.cytoscape.org/2016/05/24/getting-started/
Je résolu mon problème avec extention pour créer des étiquettes html pour Cytoscape.
Extention sur github: cytoscape-node-html-label
Extention Démo: demo
cy.nodeHtmlLabel(
[
{
query: 'node',
tpl: function(data){
return '<p class="line1">line 1</p><p class="line1">line 2</p>'}
}
]
);.line1{
font-size: 10px;
}
.line1{
font-size: 12px;
}
qui ne répond pas à la question sur l'étiquette des styles complexes –