CODEWITHSUNDEEP
cytoscape.js
maxim fedotov
maxim fedotov

Reputation: 85

How do I make classes work in Cytoscape.js

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.

Upvotes: 7

Views: 5011

Answers (2)

Kala Hari
Kala Hari

Reputation: 1

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' } }
                    ]                 
               },
        });

Upvotes: 0

DaNeSh
DaNeSh

Reputation: 1062

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();

Upvotes: 2

Related Questions