Cytoscape 3.5.0-升级到Cytoscape 3.11.0-不变
复合子节点样式未显示在addClass上，但父节点显示了
我在onClick事件期间已成功将其他类添加到选定的Node元素：
cy.on('click', 'node', (evt) => (...
但是，当我单击父样式时，我只会看到样式更改，而看不到子样式。当我单击子节点时，我发现它已在console.log输出中添加了类，与对父节点的添加过程相同，但是在子图中未看到预期的样式更改就像我为父母所做的一样。
我已经进行了大量的实验，没有成功地阅读文档和示例，但是令人困惑的是，父样式会随addClass发生变化，而子样式不会发生变化。
我很茫然。谢谢您对此提供的任何帮助。
控制台日志：
(2) ["controller", "selectedNode"]
0: "controller"
1: "selectedNode"
length: 2
__proto__: Array(0)CY Onclick事件：
cy.on('click', 'node', (evt) => {
cy.elements().removeClass('selectedNode');
let selectedNode = cy.$('#'+evt.target.id());
selectedNode.addClass('selectedNode');
console.log(selectedNode.classes());
});选择器类：
{
selector: '.controller',
style: {
'background-color': 'lightgrey',
'color': '#737373',
'font-weight': 'bold',
'background-opacity': 0.115,
'content': 'data(label)',
'text-valign': 'bottom',
'text-wrap': 'wrap',
'shape': 'roundrectangle',
'border-width': .001,
'border-color': 'lightgrey',
'font-size': 24,
"height": 46,
"width": 85,
'background-image': '/networkdiagram/controller.svg',
"background-fit": "cover cover",
}
},
{
selector: '.selectedNode',
style: {
// 'color': 'black',
'border-width': 8,
'border-color': '#5da963',
}
}这里似乎没有太多错误，您可以使用evt.target（直接在没有任何查询的情况下）更轻松地访问目标节点，并且我倾向于使用unbind（只是为了确保我不调用事件处理程序多次）：
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [{
selector: "node",
css: {
content: "data(id)",
"text-valign": "center",
"text-halign": "center",
height: "60px",
width: "60px"
}
},
{
selector: "edge",
css: {
label: "\u2B24",
"curve-style": "bezier",
"target-arrow-shape": "data(arrow)"
}
},
{
selector: ".selectedNode",
style: {
"border-width": 8,
"border-color": "#5da963"
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
parent: "n4"
}
},
{
data: {
id: "n1",
parent: "n5"
}
},
{
data: {
id: "n2",
parent: "n5"
}
},
{
data: {
id: "n3",
parent: "n5"
}
},
{
data: {
id: "n4",
parent: "n5"
}
},
{
data: {
id: "n5"
}
}
],
edges: [{
data: {
source: "n0",
target: "n1",
arrow: "triangle"
}
},
{
data: {
source: "n1",
target: "n2",
arrow: "triangle"
}
},
{
data: {
source: "n1",
target: "n3",
arrow: "triangle"
}
}
]
},
layout: {
name: "concentric",
minNodeSpacing: 140
}
}));
cy.unbind("click");
cy.bind("click", "node", evt => {
cy.elements().removeClass("selectedNode");
evt.target.addClass("selectedNode");
});body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
left: 0;
top: 0;
float: left;
position: absolute;
}
.cxtmenu-disabled {
opacity: 0.333;
}<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://cdn.jsdelivr.net/npm/[email protected]/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>