CODEWITHSUNDEEP
cytoscape.js
ljxalpha
ljxalpha

Reputation: 13

How to paint multi colors on one single node (not gradients) with cytoscape? Thank you

How to render multiple colors to a node in cytoscape? The shape of the node can be arbitrary. Multiple different colors on the node are arranged from left to right (or from top to bottom). Also, I don't want gradients. I want to display multiple independent solid colors on one node.

Upvotes: 0

Views: 386

Answers (1)

swatchai
swatchai

Reputation: 18762

You can use SVG graphic as parts of the nodes' markers. Here is a runnable code to demonstrate the concept.

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>

Upvotes: 2

Related Questions