show ingoing node on click cytoscape.js
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
content: "data(id)"
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle",
"visibility": "hidden",
"line-color": "#61bffc",
}
},
{
selector: "edge.visible",
style: {
"visibility": "visible",
}
}
],
elements: {
nodes: [{
data: {
id: "a"
}
}, {
data: {
id: "b"
}
}, {
data: {
id: "c"
}
}],
edges: [{
data: {
id: "ab",
source: "a",
target: "b"
}
}, {
data: {
id: "bc",
source: "b",
target: "c"
}
}]
},
layout: {
name: "grid"
}
}));
cy.on("click", "node", function(event) {
let connectedEdges = event.target.connectedEdges();
connectedEdges.toggleClass("visible");
});
});