我想为 cytoscape 元素（节点和边）添加条件样式。我阅读了 cytoscape 的条件样式，但这似乎在渲染图形后添加了样式条件，我认为当有很多条件时这不是很好。 style: { "content": "data(label)", "shape": "round-rectangle", "width": "150px", "text-valign": "center", "background-color": "data(error)" ? "red" : "green" }我想根据错误属性的值设置背景。这不起作用，因为“数据（错误）”是一个字符串。我试过"data(error)" === "true"了，但也没有用。你能帮帮我吗？
1 回答
慕神8447489
TA贡献1780条经验 获得超1个赞
您可以使用一个简单的功能块来实现这一点。该函数有一个参数，即当前节点。.data(attr)您可以通过调用以下方法访问节点：
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
layout: {
name: "klay"
},
style: [{
selector: "node",
style: {
// You can use function(node){} instead of ES6 syntax here
"background-color": node => node.data('error') ? 'red' : 'green',
"content": "data(label)",
"shape": "round-rectangle",
"width": "50px",
"text-valign": "center"
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle",
"line-color": "#dd4de2",
"target-arrow-color": "#dd4de2",
opacity: 0.5
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
label: "n0",
error: true
}
},
{
data: {
id: "n1",
label: "n1",
error: false
}
},
{
data: {
id: "n2",
label: "n2",
error: false
}
},
{
data: {
id: "n3",
label: "n3",
error: false
}
},
{
data: {
id: "n4",
label: "n4",
error: true
}
},
{
data: {
id: "n5",
label: "n5",
error: true
}
},
{
data: {
id: "n6",
label: "n6",
error: false
}
},
{
data: {
id: "n7",
label: "n7",
error: false
}
},
{
data: {
id: "n8",
label: "n8",
error: false
}
},
{
data: {
id: "n9",
label: "n9",
error: true
}
},
{
data: {
id: "n10",
label: "n10",
error: true
}
},
{
data: {
id: "n11",
label: "n11",
error: false
}
},
{
data: {
id: "n12",
label: "n12",
error: true
}
},
{
data: {
id: "n13",
label: "n13",
error: false
}
},
{
data: {
id: "n14",
label: "n14",
error: true
}
},
{
data: {
id: "n15",
label: "n15",
error: false
}
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
},
{
data: {
source: "n2",
target: "n4"
}
},
{
data: {
source: "n4",
target: "n5"
}
},
{
data: {
source: "n4",
target: "n6"
}
},
{
data: {
source: "n6",
target: "n7"
}
},
{
data: {
source: "n6",
target: "n8"
}
},
{
data: {
source: "n8",
target: "n9"
}
},
{
data: {
source: "n8",
target: "n10"
}
},
{
data: {
source: "n10",
target: "n11"
}
},
{
data: {
source: "n11",
target: "n12"
}
},
{
data: {
source: "n12",
target: "n13"
}
},
{
data: {
source: "n13",
target: "n14"
}
},
{
data: {
source: "n13",
target: "n15"
}
}
]
}
}));
});
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: 999;
}
<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.3/cytoscape-klay.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
我通常建议使用类而不是条件 css：
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
layout: {
name: "klay"
},
style: [{
selector: "node",
style: {
"background-color": 'green',
"content": "data(label)",
"shape": "round-rectangle",
"width": "50px",
"text-valign": "center"
}
},
{
selector: ".danger",
style: {
"background-color": 'red'
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle",
"line-color": "#dd4de2",
"target-arrow-color": "#dd4de2",
opacity: 0.5
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
label: "n0",
error: true
},
classes: 'danger'
},
{
data: {
id: "n1",
label: "n1",
error: false
}
},
{
data: {
id: "n2",
label: "n2",
error: false
}
},
{
data: {
id: "n3",
label: "n3",
error: false
}
},
{
data: {
id: "n4",
label: "n4",
error: true
}
},
{
data: {
id: "n5",
label: "n5",
error: true
},
classes: 'danger'
},
{
data: {
id: "n6",
label: "n6",
error: false
}
},
{
data: {
id: "n7",
label: "n7",
error: false
}
},
{
data: {
id: "n8",
label: "n8",
error: false
}
},
{
data: {
id: "n9",
label: "n9",
error: true
}
},
{
data: {
id: "n10",
label: "n10",
error: true
}
},
{
data: {
id: "n11",
label: "n11",
error: false
}
},
{
data: {
id: "n12",
label: "n12",
error: true
}
},
{
data: {
id: "n13",
label: "n13",
error: false
}
},
{
data: {
id: "n14",
label: "n14",
error: true
}
},
{
data: {
id: "n15",
label: "n15",
error: false
}
}
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
},
{
data: {
source: "n2",
target: "n4"
}
},
{
data: {
source: "n4",
target: "n5"
}
},
{
data: {
source: "n4",
target: "n6"
}
},
{
data: {
source: "n6",
target: "n7"
}
},
{
data: {
source: "n6",
target: "n8"
}
},
{
data: {
source: "n8",
target: "n9"
}
},
{
data: {
source: "n8",
target: "n10"
}
},
{
data: {
source: "n10",
target: "n11"
}
},
{
data: {
source: "n11",
target: "n12"
}
},
{
data: {
source: "n12",
target: "n13"
}
},
{
data: {
source: "n13",
target: "n14"
}
},
{
data: {
source: "n13",
target: "n15"
}
}
]
}
}));
});
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: 999;
}
<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.3/cytoscape-klay.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
添加回答
举报
0/150
提交
取消