How do I make classes work in Cytoscape.js

Question

I am trying to add a class to the node, to have all my css in a stylesheet file, not inside javascrpt declaration.

  var values = {
    nodes: [
      { data: { id: 'explore'}, 
        classes: 'ClassName1'
      },
      { data: { id: 'discover' } }
    ],
    edges: [
      { data: { source: 'explore', target: 'discover' } }
    ]
};

As you can see I am adding classes and the class name, but nothing happens.

Crankshaft

Welcome to SO. Please read How to Ask – Obliteration

I can't reproduce your issue. Please create a full example that reproduces your issue and put it online on jsbin or similar. – Frere

Answer 1

You should use selectors, Here is the solution:

        var cy = cytoscape({
            container: this.div[0],
            style: cytoscape.stylesheet()
            .selector(".ClassName1")
                .css({
                    'background-color': 'red',
                })        ,
            elements: values ,
            layout: 'MyLayout'
        });
        cy.layout();

Melisma

Answer 2

The answer provided by DaNeSh is good. But let me provide a detailed explanation.

Step 1 : Create a HTML div (call it 'cy').

Step 2 : Inside the JS

var cy = cytoscape({
                container: document.getElementById('cy')
                style: [
                    {
                        selector: 'node',
                        style: {
                            'label': 'data(id)'
                        }
                    },

                    {
                        selector: '.ClassName1',
                        style: {
                            'width': 8,
                            'height': 8,
                            'label': ''
                        }
                    }
                ],
                elements: {
                    nodes: [
                          { data: { id: 'explore'}, classes: 'ClassName1'},
                          { data: { id: 'discover' } }
                    ],
                    edges: [
                          { data: { source: 'explore', target: 'discover' } }
                    ]                 
               },
        });

Currier

When you remove the point of the selector than it works for me, maybe someone helps. – Ace