javascript - 细胞景观的条件样式

Question

我想为 cytoscape 元素(节点和边缘)添加条件样式。我读了 conditional styles for 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() {
  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>