Cytoscape.js style node based on content

Question

I would like to color my root node a different color than the rest of the nodes on the screen, I have already done some pre-work to identify the value of the root node and have it readily available in a variable. However, in trying to style the graph nothing happens and its been difficult to debug through this.

example:

nodes: [{id = 1}, {id=2}]

var startingNode = 1; //root node

$('#cy').cytoscape({
                style: [
                    {
                        selector: 'node',
                        css: {
                            'content': 'data(id)',
                            'background-color': 'red',
                            'color': 'black',
                            'border-width': '1px',
                            'border-color': 'black'
                        }
                    },
                    {
                        selector: "node[content = 'startingNode']", 
                        css: {
                            'content': 'data(id)',
                            'background-color': 'purple',
                            'color': 'black',
                            'border-width': '1px',
                            'border-color': 'black'

                        }
                    }]

// more info for cytoscape rendering omitted

});

Any input would be helpful!

Thanks, Paul G.

Answer 1

Unless, content is in the node's data, that won't work. If you have the ID of a node (e.g. foo), you can use #foo or [id = 'foo'] as the selector.