Cytoscape 3.5.0 - 升级到 Cytoscape 3.11.0 - 无变化
addClass 上未显示复合子节点样式，但父节点显示
我在 onClick 事件期间成功地向选定的节点元素添加了一个额外的类:
cy.on('click', 'node', (evt) => (...
但是，单击时我只看到父项上的样式发生变化，而没有看到子项。当我单击子节点时，我发现它已在 console.log 输出中添加了类，就像它为父节点所做的一样，但我没有在图表中看到预期的子节点样式更改就像我为 parent 所做的那样。
我已经进行了大量实验并通读了文档和示例但没有成功，但令人困惑的是父级样式会随着 addClass 而改变，而子级样式却不会。
我很迷茫。感谢您对此提供的任何帮助。
控制台日志:
(2) ["controller", "selectedNode"]
0: "controller"
1: "selectedNode"
length: 2
proto: Array(0)
点击事件:
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: {
'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/cytoscape@3.10.1/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>关于javascript - Cytoscape.js 复合子节点 addClass 不显示样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58686166/