Cytoscape.js无法显示？

Question

我之前询问如何将cytoscape作为依赖项远程加载。@GBE提供了以下答案

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>

所以我制作了一个 HTML 文件，并且把来自 cytoscape 的 introductory example 原封不动地复制过来（将其用 <script>code</script> 包裹）。然而结果什么也没有呈现。为什么？下面是方便起见的代码。

小问题：为什么源代码被包含在中括号内：

<script src="stuff"></script>

其它所有内容都是什么？

<script>代码</script>？

介绍示例

<script>
var cy = cytoscape({

  container: document.getElementById('cy'), // container to render in

  elements: [ // list of graph elements to start with
    { // node a
      data: { id: 'a' }
    },
    { // node b
      data: { id: 'b' }
    },
    { // edge ab
      data: { id: 'ab', source: 'a', target: 'b' }
    }
  ],

  style: [ // the stylesheet for the graph
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },

    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],

  layout: {
    name: 'grid',
    rows: 1
  }

});
</script>

- SumNeuron

Answer 1

当你编写时，

<script>
   //Javascript code
</script>

你在开标签和闭标签之间编写的Javascript代码将会被呈现。但是，如果在 <script> 标签内指定了一个 src 属性，例如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js"></script>

然后，位于 https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js 的 Javascript 代码将被渲染。
您可以在浏览器的 URL 栏中输入 https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js 来查看将要被渲染的代码。

这实际上是一个 CDN - 内容分发网络。您也可以使用一个 .js 文件。当您使用一个 .js 文件时，您需要指定它在项目中的路径。

编辑：工作样例：https://jsfiddle.net/0py37s5x/2/

- etrupja

---

@SumNeuron 当你删除 CSS 时，它不起作用。因为你正在使用 <div id="cy"></div> 这个 div 来显示所有内容。这个 div 有一个 id="cy"，它是使用 CSS 定义的，比如 width: 100%; height: 100%;。当你不定义任何属性（使用 CSS）到这个 div 时，它会显示为空，所以你看不到任何东西。 - etrupja

这是一个愚蠢的问题..我该如何从不同的文件中加载JSON？ - SumNeuron