cytoscape 的条件样式

Question

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

      style: {

            "content": "data(label)",

            "shape": "round-rectangle",

            "width": "150px",

            "text-valign": "center",

            "background-color": "data(error)" ? "red" : "green"

        }

我想根据错误属性的值设置背景。这不起作用，因为“数据（错误）”是一个字符串。我试过"data(error)" === "true"了，但也没有用。你能帮帮我吗？

Answer 1

您可以使用一个简单的功能块来实现这一点。该函数有一个参数，即当前节点。.data(attr)您可以通过调用以下方法访问节点：document.addEventListener("DOMContentLoaded", function() {&nbsp; var cy = (window.cy = cytoscape({&nbsp; &nbsp; container: document.getElementById("cy"),&nbsp; &nbsp; layout: {&nbsp; &nbsp; &nbsp; name: "klay"&nbsp; &nbsp; },&nbsp; &nbsp; style: [{&nbsp; &nbsp; &nbsp; &nbsp; selector: "node",&nbsp; &nbsp; &nbsp; &nbsp; style: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // You can use function(node){} instead of ES6 syntax here&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "background-color": node => node.data('error') ? 'red' : 'green',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "content": "data(label)",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "shape": "round-rectangle",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "width": "50px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text-valign": "center"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: "edge",&nbsp; &nbsp; &nbsp; &nbsp; style: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "curve-style": "bezier",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "target-arrow-shape": "triangle",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "line-color": "#dd4de2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "target-arrow-color": "#dd4de2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0.5&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ],&nbsp; &nbsp; elements: {&nbsp; &nbsp; &nbsp; nodes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n0",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n0",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n3",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n3",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n5",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n5",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n7",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n7",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n9",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n9",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n10",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n10",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n11",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n11",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n12",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n12",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n13",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n13",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n14",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n14",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n15",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n15",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; edges: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n0",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n3"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n4"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n5"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n6"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n7"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n8"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n9"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n10"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n10",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n11"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n11",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n12"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n12",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n13"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n13",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n14"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n13",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n15"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; }));});body {&nbsp; font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;&nbsp; font-size: 14px;}#cy {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; bottom: 0;&nbsp; right: 0;&nbsp; z-index: 999;}<html><head>&nbsp; <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>&nbsp; <script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>&nbsp; <script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.3/cytoscape-klay.min.js"></script></head><body>&nbsp; <div id="cy"></div></body></html>我通常建议使用类而不是条件 css：document.addEventListener("DOMContentLoaded", function() {&nbsp; var cy = (window.cy = cytoscape({&nbsp; &nbsp; container: document.getElementById("cy"),&nbsp; &nbsp; layout: {&nbsp; &nbsp; &nbsp; name: "klay"&nbsp; &nbsp; },&nbsp; &nbsp; style: [{&nbsp; &nbsp; &nbsp; &nbsp; selector: "node",&nbsp; &nbsp; &nbsp; &nbsp; style: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "background-color": 'green',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "content": "data(label)",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "shape": "round-rectangle",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "width": "50px",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "text-valign": "center"&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: ".danger",&nbsp; &nbsp; &nbsp; &nbsp; style: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "background-color": 'red'&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; selector: "edge",&nbsp; &nbsp; &nbsp; &nbsp; style: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "curve-style": "bezier",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "target-arrow-shape": "triangle",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "line-color": "#dd4de2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "target-arrow-color": "#dd4de2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0.5&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ],&nbsp; &nbsp; elements: {&nbsp; &nbsp; &nbsp; nodes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n0",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n0",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; classes: 'danger'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n3",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n3",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n5",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n5",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; classes: 'danger'&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n7",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n7",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n9",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n9",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n10",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n10",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n11",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n11",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n12",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n12",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n13",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n13",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n14",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n14",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: "n15",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: "n15",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: false&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; edges: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n0",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n1"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n2"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n3"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n4"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n5"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n4",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n6"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n7"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n6",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n8"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n9"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n8",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n10"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n10",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n11"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n11",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n12"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n12",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n13"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n13",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n14"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; source: "n13",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: "n15"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; }));});body {&nbsp; font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;&nbsp; font-size: 14px;}#cy {&nbsp; position: absolute;&nbsp; left: 0;&nbsp; top: 0;&nbsp; bottom: 0;&nbsp; right: 0;&nbsp; z-index: 999;}<html><head>&nbsp; <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>&nbsp; <script src="https://unpkg.com/klayjs@0.4.1/klay.js"></script>&nbsp; <script src="https://cdn.jsdelivr.net/npm/cytoscape-klay@3.1.3/cytoscape-klay.min.js"></script></head><body>&nbsp; <div id="cy"></div></body></html>