[如何使用细胞景观在一个节点（不是渐变）上绘制多种颜色？谢谢

Question

如何在cytoscape中为节点渲染多种颜色？节点的形状可以是任意的。节点上的多种不同颜色从左到右（或从上到下）排列。另外，我不要渐变。我想在一个节点上显示多种独立的纯色。

Answer 1

您可以将SVG图形用作节点标记的一部分。这是一个可运行的代码来演示该概念。

const svg_rect = '<svg width="60" height="60" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="60" height="60" style="fill:rgb(0,0,255);stroke-width:0.3;stroke:rgb(0,0,0)" /><rect x="20" y="0" width="60" height="60" style="fill:rgb(0,255,0);stroke-width:0.3;stroke:rgb(0,0,0)" /><rect x="40" y="0" width="20" height="60" style="fill:rgb(255,0,0);stroke-width:0.3;stroke:rgb(0,0,0)" /></svg>';

const svgrect_Url = encodeURI("data:image/svg+xml;utf-8,"+svg_rect);

var cy = cytoscape({
  container: document.getElementById("cy"),

  elements: {
    nodes: [
      { data: { id: "j", name: "John" }, position: { x: 100, y: 100 } },
      { data: { id: "e", name: "Elena" }, position: { x: 100, y: 500 } },
      { data: { id: "k", name: "Kim" }, position: { x: 600, y: 500 } },
      { data: { id: "g", name: "Gordon" }, position: { x: 550, y: 80 } }
    ],

    edges: [
      { data: { source: "j", target: "e", label: "JE" } },
      { data: { source: "j", target: "g", label: "JG" } },
      { data: { source: "e", target: "j" } },
      { data: { source: "k", target: "j" } },
      { data: { source: "k", target: "e", label: "KE" } },
      { data: { source: "k", target: "g" } },
      { data: { source: "g", target: "j" } }
    ]
  },

  style: [
    {
      selector: "node",
      style: {
        shape: "rectangle",
        "background-color": "lightgray",
        "background-image": svgrect_Url,
        label: "data(name)",
        width: 60,
        height: 60,
        opacity: 0.85
      }
    },
    {
      selector: "edge",
      style: {
        label: "data(label)",
        width: 3,
        "line-color": "#c0c",
        "target-arrow-color": "#00c",
        "curve-style": "bezier",
        "target-arrow-shape": "triangle",
        "target-arrow-fill": "#c00",
        "arrow-scale" : 20
      }
    },
    {
      selector: ".highlight",
      css: {
        "background-color": "yellow"
      }
    }
  ],
  layout: {
    name: "preset"
  }
});

#cy {
    width: 100%;
    height: 80%;
    position: absolute;
    top: 10px;
    left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.min.js"></script>
<div id="cy"></div>