我在这里要做的是创建不可移除的边缘。例如我在 a 和 b 当我点击其中一个节点时，边缘应该仍然可见，他的颜色也不会变成红色。b 那么只有一条边会被创建到节点上 c 红颜祸水 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",
"visibility": "hidden",
"line-color": "#61bffc",
}
},
{
selector: ".fixededge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle",
"line-color": "#61bffc",
}
},
{
selector: ".visible",
style: {
"visibility": "visible"
}
},
{
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"
},
classes:["visible"]
}, {
data: {
id: "bc",
source: "b",
target: "c"
}
}]
},
layout: {
name: "grid"
}
}));
cy.on("click", "node", function(event) {
let connectedEdges = event.target.connectedEdges().style('line-color', 'red');
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>你可以使用一个类来实现这个功能，就像你已经用可见性来实现一样。一般来说，你有一些类，如 .可见 和 .fixedEdge:
你应该澄清，类可以处理哪些范围，你的做法是，一个节点可以有类 固定边缘. 虽然你必须手动将其添加到节点中，但最好还是写一些像这样的东西来代替。
{
selector: "edge.fixed",
style: {
"line-color": "#61bffc",
"target-arrow-color": "#61bffc",
}
},
{
selector: "edge.visible",
style: {
"visibility": "visible",
}
}
你的代码的主要区别是在事件处理程序中加入一个简单的if-clause。通过在事件处理程序中使用 hasClass() 函数，您可以查询是否存在 .固定 而直接忽略下面的类切换。另外，我还添加了 .固定 类到边缘类列表。
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": "red",
"target-arrow-color": "red",
}
},
{
selector: "edge.fixed",
style: {
"line-color": "#61bffc",
"target-arrow-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"
},
classes: ["visible", "fixed"]
}, {
data: {
id: "bc",
source: "b",
target: "c"
}
}]
},
layout: {
name: "grid"
}
}));
cy.on("click", "node", function(event) {
event.target.connectedEdges().each(function(edge) {
if (!edge.hasClass("fixed")) {
edge.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>