我正在使用cytoscape.js，并试图显示图形节点之间的边缘。仅在单击该特定节点时，我才想显示边缘。例如，这里我有三个节点a-> b-> c：
如果我单击节点c，则将出现c和b之间的边缘。如果单击节点b，则将出现从a到b到c的边缘。
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"
}
}
],
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.edges().forEach(function (edge) {
cy.remove(edge)
})
});body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/index.all.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/index.css" />
</head>
<body>
<div id="cy"></div>
</body>这里不需要去除边缘，只需切换边缘的类，然后让click事件处理程序handle剩下的：
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");
});
});body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/index.all.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/index.css" />
</head>
<body>
<div id="cy"></div>
</body>