I have a Node application using Cytoscape v3.15.2. I have the styling set as follows
let cy = cytoscape({
container: document.getElementById('graph-div'),
style: [
{
selector: 'node',
style: {
'label': 'data(id)',
}
},
{
selector: 'edge',
style: {
'label': (ele) => {
if(ele.data('type') === '1') return 'data(category1)';
if(ele.data('type') === '2') return 'data(category2)';
return value;
}
}]
});
Now, using a checkbox, I am trying to show/hide the labels on the elements. I have tried doing the following:
cy.elements().style("label","");
But this doesn't work. The same thing works when I pass a random string instead an empty string, something like this : cy.elements().style("label","random");
. Doing this sets the labels of all elements in the graph to hidden. How can I do this?
You can manage showing/hiding labels by specifying a class in the stylesheet and then toggling it on button click as in the below example.
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {name: 'grid', rows: 2},
style: [{
selector: '.hasLabel',
css: {
'label': (ele) => {
if(ele.isNode()) return ele.data('id');
if(ele.isEdge()) return ele.data('weight');
}
}
}
],
elements: {
nodes: [{
data: {
id: 'n0'
}
},
{
data: {
id: 'n1'
}
},
{
data: {
id: 'n2'
}
},
{
data: {
id: 'n3'
}
}
],
edges: [{
data: {
id: 'n0n1',
source: 'n0',
target: 'n1',
weight: 3
}
},
{
data: {
id: 'n1n2',
source: 'n1',
target: 'n2',
weight: 5
}
},
{
data: {
id: 'n2n3',
source: 'n2',
target: 'n3',
weight: 7
}
}
]
}
});
document.getElementById("labelButton").addEventListener("click", function() {
cy.elements().toggleClass('hasLabel');
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#button {
z-index = 1000;
}
#cy {
height: 95%;
width: 95%;
left: 0;
top: 50;
z-index = 900;
position: absolute;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape@3.10.0/dist/cytoscape.min.js">
</script>
</head>
<body>
<button id="labelButton" type="button">Show/Hide Labels</button>
<div id="cy"></div>
</body>
</html>