為 Cytoscape.js 中的一些子節點添加特定顏色

Question

我有一些節點是父母的孩子（節點組）。 是否可以覆蓋某些孩子的背景顏色？

我只能像這樣覆蓋正常的節點顏色：

cy.nodes('[id = "start"]').style('background-color', '#FBFBFB');

提前致謝。

[
  {
    "style": [
      {
        "selector": "node",
        "css": {
          "shape": "roundrectangle",
          "height": "40px",
          "background-color": "#58D68D",
          "label": "data(id)",
          "text-valign": "center",
          "border-width": "2",
          "border-color": "black"
        }
      },
      {
        "selector": ":parent",
        "css": {
          "background-opacity": "0.333",
          "text-halign": "center",
          "text-valign": "top"
        }
      },
]
]
}

Answer 1

您始終可以在初始化節點時指定節點的顏色：

 var cy = (window.cy = cytoscape({ container: document.getElementById("cy"), style: [{ selector: "node", css: { "shape": "roundrectangle", "height": "40px", "background-color": function(node) { if (node.data("colored")) return "#FBFBFB"; else return "#58D68D"; }, "label": "data(id)", "text-valign": "center", "border-width": "2", "border-color": "black" } }, { selector: ':parent', css: { "background-opacity": "0.333", "text-halign": "center", "text-valign": "top" } }, { selector: "edge", css: { label: "\⬤", "curve-style": "bezier", "target-arrow-shape": "data(arrow)" } } ], elements: { nodes: [{ data: { id: "n0", colored: true, parent: "n4" } }, { data: { id: "n1", colored: false, parent: "n5" } }, { data: { id: "n2", colored: true, parent: "n5" } }, { data: { id: "n3", colored: true, parent: "n5" } }, { data: { id: "n4", colored: false, parent: "n5" } }, { data: { id: "n5", colored: false, } } ], 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 } }));

 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>

為 Cytoscape.js 中的一些子節點添加特定顏色

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-01 09:34:27

為 Cytoscape.js 中的一些子節點添加特定顏色

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-01 09:34:27

解決方案1
1 已采納 2020-05-01 09:34:27