如何用cytoscape在一个节点(不是渐变)上绘制多种颜色?谢谢

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

fancykee 回答:如何用cytoscape在一个节点(不是渐变)上绘制多种颜色?谢谢

您可以将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,255);stroke-width:0.3;stroke:rgb(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)" /><rect x="40" y="0" width="20" height="60" style="fill:rgb(255,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" },y: 500 } },{ data: { id: "k",name: "Kim" },position: { x: 600,{ 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",label: "KE" } },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>

本文链接:https://www.f2er.com/3049649.html

大家都在问