CODEWITHSUNDEEP
javascriptjquerycytoscape.js
paul shannon
paul shannon

Reputation: 375

live code examples: cytoscape.js initialization -- incomplete?

Being brand new to cytoscape.js, I may be missing something obvious. Please forgive me if that is so.

I am studying the first example offered here:

reached from this page

Three files are offered -- HTML, CSS, JavaScript -- along with the impression that these three will, when loaded into my browser, create a running example.

But the HTML seems to be incomplete, possibly in two ways:

  1. the JavaScript on the jsbin page needs to be included via a script tag
  2. the variable cy is not defined anywhere that I can see, leading to this error message in the console: Object #cy has no method cytoscape

A stack overflow search on that error message points back to the very fine cy.js documentation, but alas, I am still in the dark: where do I initialize the "cy" object?

And best of all, where can I find a complete working example, useful for such a raw beginner as myself, something I can pore over and study until I begin to grasp the logic of this style of programming, and make use of this very fine library?

Thanks!

Upvotes: 1

Views: 4131

Answers (2)

gcpdev
gcpdev

Reputation: 459

I really don't know what's your JavaScript & jQuery knowledge level, but it seems you may need to practice it all a little.

  1. Yes, if you're referring to the following tag:

    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>

    This is indeed necessary, as it is the basis of cytoscape.js, the library itself, wich allows, for instance, add the method cytoscape to the variable #cy, as you mentioned in your second point.

  2. The variable #cy is the div itself. jQuery refers to objects IDs this way, with #. So:

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

    Can be referred as $("#cy"). Wich adds the cytoscape function to it is the library itself.

I think that this live example is really good, although the one you linked is more basic and appropriate to get known with the basic structure and initialization of cytoscape.js. I suggest you to get known with jQuery (this course was really clear to me) and read the cytoscape.js documentation, which is full of rich examples.

Upvotes: 2

tom4everitt
tom4everitt

Reputation: 591

Your first example is indeed a fully working example. Just use the menu to the top left. Choose File -> Download. This will download a single HTML-file, that works out of the box.

The file is called jsbin.ravecala.1.html. Open with

firefox jsbin.ravecala.1.html

(I also struggled a while before realizing this.)

Upvotes: 2

Related Questions