CODEWITHSUNDEEP
cytoscape.js
Sam
Sam

Reputation: 65

Cytoscape.js setting node colour and other details

I am using Cytoscape.js to create a basic diagram and am curious as to how to set the colour and particular shape of each node. Here is my existing code:

    layout: {
        name: 'preset'
    },

    ready: function(){
        window.cy = this;

        cy.add([
          { group: "nodes", data: { id: "n0" }, position: { x: 100, y: 100 } },
          { group: "nodes", data: { id: "n1", shape: 'rectangle' }, position: { x: 200, y: 200 } },
          { group: "edges", data: { id: "e0", source: "n0", target: "n1" } }
    ]);
    }
});

});

I was also curious as to how to animate the diagram and if there were any similar examples out there on that.

cheers,

Upvotes: 2

Views: 6368

Answers (1)

min-metal
min-metal

Reputation: 71

...
style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'shape': 'rectangle',
      }
    },
],
...

background-color is probably the attribute you are looking for, this is set in the style option. More info can be in http://js.cytoscape.org/#getting-started/specifying-basic-options.

As for the shape, cytoscape has a few predefined shapes such as rectangle, circle, etc. You can even make your own, or have an svg as the node's image. Options for nodes are listed in http://js.cytoscape.org/#style/node-body.

For animation I would look at some of the demos uploaded and go from there. This one is particularly interesting js.cytoscape.org/demos/aedff159b0df05ccfaa5

Upvotes: 1

Related Questions