Это может быть достигнуто исключительно путем добавления преобразователя data () к родительской таблице стилей:
Добавив преобразователь в таблицу стилей, вы можете извлекать данные из самих узлов, а также определять родительские цвета.добавив их с разумным свойством, таким как 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;
}
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<body>
<div id="cy"></div>
</body>
</html>
С этим вы сможете добавить цвета к родителям, и после этого вы настроены.