How to use the cytoscape.stylesheet function in cytoscape
To help you get started, we’ve selected a few cytoscape examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
gdela / socomo / socomo-view / src / diagram-skin.js View on Github 
// klay - https://github.com/cytoscape/cytoscape.js-klay
klay: {
direction: 'DOWN',
thoroughness: 50,
nodePlacement: 'LINEAR_SEGMENTS',
cycleBreaking: 'GREEDY',
spacing: 8,
inLayerSpacingFactor: 2.0,
edgeSpacingFactor: 0.2,
borderSpacing: 10,
},
priority: edge => Math.round(edge.data('strength'))
};
// see http://js.cytoscape.org/#style
const diagramStyle = cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(id)',
'shape': 'rectangle',
'height': '25px',
'width': '90px',
'padding': 0,
'color': '#000',
'background-color': '#ede9ed',
'text-valign': 'center',
'text-halign': 'center',
'font-family': 'Lato, Verdana, Geneva, sans-serif',
'font-size': '10px',
})getStyle(){
return cytoscape.stylesheet()
.selector('node[sla]')
.css({
width: 60,
height: 60,
'text-valign': 'bottom',
'text-halign': 'center',
'font-family': 'Microsoft YaHei',
// content: 'sla----sla',
'text-margin-y': 10,
'border-width': 10,
'border-color': '#2FC25B',
label: 'data(name)',
})
.selector(':selected')
.css({
'background-color': '#2FC25B'const NetworkDefaultStyle = () =>
stylesheet()
.selector('node')
.style({
'font-size': 8,
'text-valign': 'center',
'text-halign': 'right',
'color': 'gray',
'text-max-width': 60,
'text-wrap': 'wrap',
'min-zoomed-font-size': 0.4,
'border-color': '#D84315',
'background-color'(e) {
let color = 'steelblue' // default
if (e.data('group')) color = colors(e.data('group'))
else if (e.data('color')) color = e.data('color')
return e.data('selected') ? 'yellow' : color
},export const applyDefaultStyle = function() {
return cytoscape.stylesheet()
.selector('node')
.style({
'font-size': 6,//graphState.fontSize,
'text-valign': 'center',
'text-halign': 'right',
'color': 'gray',
'text-max-width': 60,
'text-wrap': 'wrap',
'min-zoomed-font-size': 0.4,
'border-color': '#D84315',
'background-color' : function(e) {
var color = "#CCC" // default
if (e.data("group")) color = colors(e.data("group"))
else if (e.data("color")) color = e.data("color")
return e.data('starred') ? 'yellow' : color
},export default function createGitTree(gitTreeId, gitNodes, gitEdges) {
var cy = window.cy = cytoscape({
container: document.getElementById(gitTreeId),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre'
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(commit)',
'width': 65,
'height': 65,
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'right',
'border-width': 3,
'background-image': function(el) {
console.log(el.data('bg'));
return el.data('bg');
},
'background-fit': 'cover',
'border-color': '#c0e8d8'
})componentDidMount() {
this.init();
this.cy = cytoscape({
container: document.getElementById('graph-container'),
style: cytoscape.stylesheet()
.selector('node')
.css({
'height': 100,
'width': 100,
'font-size': 10,
'label': 'data(name)',
'text-wrap': 'wrap',
'text-outline-color': 'data(color)',
'background-color': 'data(color)',
'color': 'black',
'shape': 'data(shape)'
})
.selector('edge')
.css({
'width': 7,
'line-color': '#ffaaaa',renderCytoscapeElement() {
this.cy = cytoscape(
{
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')
.css({
height: 80,
width: 80,
'background-fit': 'cover',
'border-color': '#000',
'border-width': 3,
'border-opacity': 0.5,
content: 'data(id)',
'text-valign': 'center',
})
.selector('.passed')
.css({
'background-color': 'green',
})
.selector('.failed')Style.prototype.getCytoscapeStyle = function(){
var css = cytoscape.stylesheet()
.selector("node")
.css({
"content": "data(label)",
"text-valign": "center",
"color": "white",
"text-outline-width": 2,
"text-outline-color": "#778899"
})
.selector("edge")
.css({
"background-color": "white"
})
.selector(".chosen")
.css({
"background-color": "black",
"opacity": 0.6private getCytoscapeConfig() {
return {
container: this.cyEl.nativeElement,
elements: this.elements,
zoomingEnabled: false,
zoom: 0.5,
userZoomingEnabled: true,
boxSelectionEnabled: false,
autounselectify: false,
autolock: false,
layout: {
name: 'preset'
},
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'font-size': '18px',
'font-weight': '600',
'text-valign': 'top',
'text-halign': 'center',
'color': '#000',
'text-outline-width': '0',
'background-color': '#000',
'text-outline-color': '#000',
'opacity': '1',
'border-color': '#3f51b5',
'border-style': 'solid'
})
.selector('node[status = "locked"]')cytoscape
Graph theory (a.k.a. network) library for analysis and visualisation
