Javascript 细胞景观的条件造型

我想为cytoscape元素（节点和边）添加条件样式。我读过，但这似乎是在图形渲染后添加了样式条件，我认为当有很多条件时，这不是很好

样式：{
“内容”：“数据（标签）”，
“形状”：“圆形矩形”，
“宽度”：“150px”，
“文本有效”：“中心”，
“背景色”：“数据（错误）”？“红色”：“绿色”
}

---

我想根据error属性的值设置背景。这不起作用，因为“数据（错误）”是字符串。我尝试了

“数据（错误）”==“true”

，但也没有成功。您能帮我一下吗？

您可以使用一个简单的功能块来实现这一点。该函数有一个参数，即当前节点。您可以通过调用

.data（attr）

方法访问节点：

document.addEventListener（“DOMContentLoaded”，function（））{
var cy=（window.cy=cytoscape）({
容器：document.getElementById（“cy”），
布局：{
姓名：“klay”
},
风格：[{
选择器：“节点”，
风格：{
//这里可以使用函数（节点）{}代替ES6语法
“背景色”：node=>node.data（'error'）？“红色”：“绿色”，
“内容”：“数据（标签）”，
“形状”：“圆形矩形”，
“宽度”：“50px”，
“文本有效”：“中心”
}
},
{
选择器：“边缘”，
风格：{
“曲线样式”：“贝塞尔”，
“目标箭头形状”：“三角形”，
“线条颜色”：“dd4de2”，
“目标箭头颜色”：“dd4de2”，
不透明度：0.5
}
}
],
要素：{
节点：[{
数据：{
id:“n0”，
标签：“n0”，
错误：正确
}
},
{
数据：{
id:“n1”，
标签：“n1”，
错误：false
}
},
{
数据：{
id:“n2”，
标签：“n2”，
错误：false
}
},
{
数据：{
id:“n3”，
标签：“n3”，
错误：false
}
},
{
数据：{
id:“n4”，
标签：“n4”，
错误：正确
}
},
{
数据：{
id:“n5”，
标签：“n5”，
错误：正确
}
},
{
数据：{
id:“n6”，
标签：“n6”，
错误：false
}
},
{
数据：{
id:“n7”，
标签：“n7”，
错误：false
}
},
{
数据：{
id:“n8”，
标签：“n8”，
错误：false
}
},
{
数据：{
id:“n9”，
标签：“n9”，
错误：正确
}
},
{
数据：{
id:“n10”，
标签：“n10”，
错误：正确
}
},
{
数据：{
id:“n11”，
标签：“n11”，
错误：false
}
},
{
数据：{
id:“n12”，
标签：“n12”，
错误：正确
}
},
{
数据：{
id:“n13”，
标签：“n13”，
错误：false
}
},
{
数据：{
id:“n14”，
标签：“n14”，
错误：正确
}
},
{
数据：{
id:“n15”，
标签：“n15”，
错误：false
}
}
],
边缘：[{
数据：{
资料来源：“n0”，
目标：“n1”
}
},
{
数据：{
资料来源：“n1”，
目标：“n2”
}
},
{
数据：{
资料来源：“n1”，
目标：“n3”
}
},
{
数据：{
资料来源：“n2”，
目标：“n4”
}
},
{
数据：{
资料来源：“n4”，
目标：“n5”
}
},
{
数据：{
资料来源：“n4”，
目标：“n6”
}
},
{
数据：{
资料来源：“n6”，
目标：“n7”
}
},
{
数据：{
资料来源：“n6”，
目标：“n8”
}
},
{
数据：{
资料来源：“n8”，
目标：“n9”
}
},
{
数据：{
资料来源：“n8”，
目标：“n10”
}
},
{
数据：{
资料来源：“n10”，
目标：“n11”
}
},
{
数据：{
资料来源：“n11”，
目标：“n12”
}
},
{
数据：{
资料来源：“n12”，
目标：“n13”
}
},
{
数据：{
资料来源：“n13”，
目标：“n14”
}
},
{
数据：{
资料来源：“n13”，
目标：“n15”
}
}
]
}
}));
});
正文{
字体系列：helvetica neue、helvetica、liberation sans、arial、sans serif；
字体大小：14px；
}
#赛义德{
位置：绝对位置；
左：0；
排名：0；
底部：0；
右：0；
z指数：999；
}