CODEWITHSUNDEEP
javascriptjquerycytoscape.js
Proto
Proto

Reputation: 77

How to get cytoscape.js to work

I'm having problems getting a very simple cytoscape.js example to work at all. Here is my code in a pastebin link

I'm fairly new to Javascript in general, so this may be a very basic mistake. console.log statements put through the function calls indicate that the cy function is getting properly called and executed, and the browser console doesn't seem t throw any errors, however I cannot get the graph to show. Is there anything that I'm missing in my definition?

I tried to make it as minimalistic as possible. The code is only verbatim copied from some of the cytoscape.js examples. cy.cytoscape is the relevant function. Calling code is at the bottom

$('#cy').cytoscape({


.......

<body>
  <div id="cy"></div>
</body>

edit: jsfiddle link

Upvotes: 1

Views: 6323

Answers (1)

Rai Ammad Khan
Rai Ammad Khan

Reputation: 1561

I have made some changes in your code.Now it is working fine. Please look at the link below

CSS

    body { 
      font: 14px helvetica neue, helvetica, arial, sans-serif;
    }

    #cy {
      height: 100%;
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }

JavaScript

 $(function() { // on dom ready

        $('#cy').cytoscape({

            style: cytoscape.stylesheet()
                .selector('node')
                .css({
                'content': 'data(name)',
                    'text-valign': 'center',
                    'color': 'white',
                    'text-outline-width': 2,
                    'text-outline-color': '#888'
            })
                .selector('edge')
                .css({
                'target-arrow-shape': 'triangle'
            })
                .selector(':selected')
                .css({
                'background-color': 'black',
                    'line-color': 'black',
                    'target-arrow-color': 'black',
                    'source-arrow-color': 'black'
            })
                .selector('.faded')
                .css({
                'opacity': 0.25,
                    'text-opacity': 0
            }),

            elements: {
                nodes: [{
                    data: {
                        id: 'j',
                        name: 'Jerry'
                    }
                }, {
                    data: {
                        id: 'e',
                        name: 'Elaine'
                    }
                }, {
                    data: {
                        id: 'k',
                        name: 'Kramer'
                    }
                }, {
                    data: {
                        id: 'g',
                        name: 'George'
                    }
                }],
                edges: [{
                    data: {
                        source: 'j',
                        target: 'e'
                    }
                }, {
                    data: {
                        source: 'j',
                        target: 'k'
                    }
                }, {
                    data: {
                        source: 'j',
                        target: 'g'
                    }
                }, {
                    data: {
                        source: 'e',
                        target: 'j'
                    }
                }, {
                    data: {
                        source: 'e',
                        target: 'k'
                    }
                }, {
                    data: {
                        source: 'k',
                        target: 'j'
                    }
                }, {
                    data: {
                        source: 'k',
                        target: 'e'
                    }
                }, {
                    data: {
                        source: 'k',
                        target: 'g'
                    }
                }, {
                    data: {
                        source: 'g',
                        target: 'j'
                    }
                }]
            },

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

                // giddy up...

                cy.elements().unselectify();

                cy.on('tap', 'node', function(e) {
                    var node = e.cyTarget;
                    var neighborhood = node.neighborhood().add(node);

                    cy.elements().addClass('faded');
                    neighborhood.removeClass('faded');
                });

                cy.on('tap', function(e) {
                    if (e.cyTarget === cy) {
                        cy.elements().removeClass('faded');
                    }
                });
            }

        });

    }); // on dom ready

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<body>
  <div id="cy"></div>
</body>

Upvotes: 4

Related Questions