如何在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>