实时代码示例:cytoscape.js初始化 - 不完整?

时间:2014-02-08 19:22:37

标签: javascript jquery cytoscape.js

作为cytoscape.js的新手,我可能会遗漏一些明显的东西。如果是这样,请原谅我。

我正在研究第一个提供here的例子:

this page

到达

提供了三个文件 - HTML,CSS,JavaScript - 以及这三个文件在加载到我的浏览器后会创建一个运行示例的印象。

但HTML似乎不完整,可能有两种方式:

  1. jsbin页面上的JavaScript需要通过脚本标记
  2. 包含在内
  3. 变量cy未在我看到的任何地方定义,导致控制台中出现此错误消息:对象#cy没有方法cytoscape
  4. 对该错误消息的堆栈溢出搜索指向非常好的cy.js文档,但是,我仍然处于黑暗中:我在哪里初始化“cy”对象?

    最重要的是,我在哪里可以找到一个完整的工作示例,对于像我这样的原始初学者很有用,我可以深入学习并研究,直到我开始掌握这种编程风格的逻辑,并利用这个非常好的图书馆?

    谢谢!

2 个答案:

答案 0 :(得分:2)

我真的不知道你的JavaScript& jQuery知识水平,但似乎你可能需要一点点练习。

  1. 是的,如果您指的是以下标记:

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

    这确实是必要的,因为它是cytoscape.js的基础,库本身,例如,允许将方法cytoscape添加到变量#cy,正如您所提到的在你的第二点。

  2. 变量#cy本身就是div。 jQuery用#这种方式引用对象ID。所以:

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

    可以称为$(“#cy”)。 Wich为它添加cytoscape函数就是库本身。

  3. 我认为this live example非常好,尽管您链接的那个更基本且适合于了解cytoscape.js的基本结构和初始化。我建议您通过jQuery(this course was really clear to me)了解并阅读cytoscape.js documentation,其中包含丰富的示例。

答案 1 :(得分:2)

你的第一个example确实是一个完全有效的例子。只需使用左上方的菜单即可。选择文件 - &gt;下载。这将下载一个开箱即用的HTML文件。

该文件名为jsbin.ravecala.1.html。用

打开
firefox jsbin.ravecala.1.html 

(在我意识到这一点之前,我也挣扎了一段时间。)