Cytoscape.js不顯示？

Question

我之前曾問過如何遠程加載cytoscape作為依賴項。 @GBE提供了以下答案

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

因此，我制作了一個HTML文件，並從cytoscape復制了逐字介紹性示例 （將其括在<script>code</script> 。但是結果什么也沒呈現。為什么？

小問題：為何將源包含為：

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

還有其他一切

<script> code </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>

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 - Content Delivery Network/Content Distribution Network 。 除了CDN，您也可以使用.js文件。 使用.js文件時，您需要指定項目所在的路徑。

編輯：工作示例： https ： //jsfiddle.net/0py37s5x/2/