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!

回答1:

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.)

回答2:

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.

来源：https://stackoverflow.com/questions/21650711/live-code-examples-cytoscape-js-initialization-incomplete