我最近在学习qazxsw poi,并且知道使用以下代码为组设置背景颜色:
cytoscape.js
但是,所有组的背景颜色都以这种方式设置为#ededeb。看下图,我无法区分黄色区域上的节点属于子组{
selector: ':parent',
style: {
'background-color': '#ededeb',
'background-opacity': 0.8
}
}
或父组group01
。
group0
我希望为每个组设置不同的颜色,以便于识别组。我猜代码应该是这样的:
任何帮助是极大的赞赏。
这可以通过将data()映射器添加到父样式表来实现:
通过将mapper添加到样式表,您可以从节点本身检索数据,因此您还可以通过添加一个合理的属性(如const COLORS = [0x11, 0x22, 0x22, 0x33, ...];// Predefined colors array
let groupColorMap = {}, colorIndex = 0;
cytoscape.stylesheet().selector(':parent').setBackgroundColor(function(node){
if(groupColorMap[node.id]){
return groupColorMap[node.id];
}else{
return groupColorMap[node.id] = COLORS[(colorIndex++)%COLORS.length];
}
});
)来定义父颜色:
parentColor
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle'
}
},
{
selector: ':parent',
css: {
'border-color': 'data(parentColor)',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
elements: {
nodes: [{
data: {
id: 'a',
parent: 'b'
},
position: {
x: 215,
y: 85
}
},
{
data: {
id: 'b',
parentColor: 'blue'
}
},
{
data: {
id: 'c',
parent: 'b'
},
position: {
x: 300,
y: 85
}
},
{
data: {
id: 'd'
},
position: {
x: 215,
y: 175
}
},
{
data: {
id: 'e',
parentColor: 'red'
}
},
{
data: {
id: 'f',
parent: 'e'
},
position: {
x: 300,
y: 175
}
}
],
edges: [{
data: {
id: 'ad',
source: 'a',
target: 'd'
}
},
{
data: {
id: 'eb',
source: 'e',
target: 'b'
}
}
]
},
layout: {
name: 'preset',
padding: 5
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
有了这个,您应该能够将颜色添加到父项,然后设置。