На следующем цитопространстве. js график показывает отсутствие стрелок на его краях. У меня есть селектор для ребер, который указывает стрелку tri angular, но он не отображается.
var cy = cytoscape({
container: document.getElementById('cy'),
style: [{
selector: 'node',
style: {
'background-color': 'mapData(activation, -1, 1, blue, red)',
'label': 'data(id)'
}
}, {
selector: 'edge',
style: {
'width': 3,
'line-color': function(ele) {
return ele.data('relation')
},
'target-arrow-color': function(ele) {
return ele.data('relation')
},
'target-arrow-shape': 'triangle'
}
}],
// If you want to apply the layout on the constructor
// you must supply the elements too
layout: {
name: 'breadthfirst'
},
elements: {
nodes: [{
group: 'nodes',
data: {
id: 'E1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E5',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E6',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E7',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'E8',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH1',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH2',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'LH4',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH3',
activation: 0
}
},
{
group: 'nodes',
data: {
id: 'RH4',
activation: 0
}
}
],
edges: [{
group: 'edges',
data: {
id: 'edge0',
source: 'E4',
target: 'E5',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge1',
source: 'E6',
target: 'E7',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge2',
source: 'LH1',
target: 'E1',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge3',
source: 'LH1',
target: 'RH1',
relation: 'green'
}
},
{
group: 'edges',
data: {
id: 'edge4',
source: 'LH2',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge5',
source: 'LH3',
target: 'E4',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge6',
source: 'LH4',
target: 'E6',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge7',
source: 'RH1',
target: 'E2',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge8',
source: 'RH1',
target: 'E3',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge9',
source: 'RH2',
target: 'E5',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge10',
source: 'RH3',
target: 'E7',
relation: 'red'
}
},
{
group: 'edges',
data: {
id: 'edge11',
source: 'RH4',
target: 'E8',
relation: 'red'
}
}
]
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
Обратите внимание, что для селектора 'edge' я задаю три angular головку.