0
Avec cytoscape.js Je veux deux effets en même temps:Avec cytoscape.js comment afficher simultanément des flèches et des étiquettes personnalisées pour les arcs entre les nœuds?
- à montrent des flèches dirigées pour les arcs entre les nœuds ET
- à spectacle sur mesure étiquettes pour les arcs entre les nœuds.
Avec le code disponible ci-dessous, je ne peux afficher que des étiquettes d'arc mais pas de flèches.
Si je retire du code du segment
style: { 'label': 'données (label)'},
je peux obtenir flèches pour être montré mais les étiquettes d'arc disparaissent. J'ai l'intention d'utiliser mon code dans un système relativement complexe de diverses bibliothèques js séparées etc. et donc je voudrais entendre une solution qui peut être utilisée avec souplesse dans diverses conditions. Merci pour votre aide.
<!DOCTYPE>
<html>
<head>
<title>cytoscape-springy.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="jquery.min.js"></script>
<script src="cytoscape.min.js"></script>
<script src="springy.js"></script>
<script src="./cytoscape-springy.js"></script>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
// left: 0;
// top: 0;
z-index: 999;
}
</style>
<script>
$(function(){
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'springy',
directed: true
},
style: [
{
selector: 'node',
css: {
'content': 'data(name)'
}
},
{
selector: 'edge',
// to get a custom label shown for each arc
style: {
'label': 'data(label)'
},
// to get an arrowhead shown for each arc
css: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': 'black',
'line-color': 'black',
'width': 3
}
}
],
elements: {
nodes: [
{ data: { id: 'a', name: 'a' } },
{ data: { id: 'b', name: 'b' } },
{ data: { id: 'c', name: 'c' } }
],
edges: [
{ data: { source: 'a', target: 'b', label: 'a_to_b' } },
{ data: { source: 'b', target: 'c', label: 'b_to_c' } },
{ data: { source: 'c', target: 'a', label: 'c_to_a' } }
]
},
});
});
</script>
</head>
<body>
<h1>cytoscape-springy demo</h1>
<div id="cy"></div>
</body>
</html>