10

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.

Paul Giganti
  • 103
  • 1
  • 5

1 Answers1

5

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.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • referring to the above example: `selector: 'node[id = startingNode]'` does not work, however: `selector: 'node[id = "1"]'` does, is the problem the scoping of my variable? And if so any suggestions on an approach? – Paul Giganti Oct 01 '14 at 16:08
  • You can't reference a variable in a string with JS without either concatenation or the string templating available in ES6. This might help you: http://www.quirksmode.org/js/strings.html – maxkfranz Oct 01 '14 at 16:47
  • 1
    Awesome, completely forgot about all that. `selector: 'node[id = "'+startingNode+'"]'` worked perfectly, thank you for the assistance! – Paul Giganti Oct 01 '14 at 17:40