javascriptgraphnodescytoscape.jscytoscape-web

Setting node style in cytoscapeJs


As you can see below not all the node style that i declare are working. I want to make the text inside the node larger and in the documentation i found the code: 'labelFontSize': 100. Than, i want to make the edge weight (that you cannot see in the picture but are present) white, and the code "labelFontColor": "white" isn't working. I am using CytoscapeJs.

Can someone explain to me why this happen?

My code is the following:

            var json_obj = response.Cy_json_archi_prima_di_chiusura_atk_supp
            var cy = cytoscape({
                container: document.getElementById('cy_atk_supp'),
                elements:  JSON.parse(json_obj),
                style: [
                {
                  selector: 'node',
                  style: {
                    'shape': 'circle',
                    'labelFontSize': 100,
                    'label': 'data(label)',
                    'text-valign': 'center',
                    'text-halign': 'center',
                    'color': 'black',
                    "height": 150,
                    "width": 150,
                    'border-width': '2px',
                    'border-color': 'black',
                    'background-color': '#399AF9'
                    //'font-size': 20
                  }

                }, 
                {
                  selector: 'edge',
                  style:{
                    'label': 'data(weight)',
                    'labelFontSize': 300,
                    "labelFontColor": "white",
                    'labelFontWeight': 'bold',
                    'lineColor': 'data(color)',
                    'width': 3,
                    'target-arrow-color': 'data(color)',
                    "curve-style": "bezier",
                    'target-arrow-shape': 'triangle',

                  }
                }
                ],
                layout: {
                    name : 'circle'
                }
            });

And this is the resulting Graph:

enter image description here


Solution

  • I was checking the wrong library.

    For cytoscapeJS these is the correct style option: https://js.cytoscape.org/#style/labels