Cytoscape.js不显示？ [英] Cytoscape.js not displaying?

问题描述

我之前曾问过如何远程加载cytoscape 作为依赖项。 @GBE提供了以下 answer

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

所以我制作了一个 HTML 文件，并逐字复制了引言示例（来自< script> code< / script> 。但是结果什么也没呈现。为什么？为方便起见，在下面的代码中

迷你问题：为什么将源括为：

 < script src = stuff>< / script> 
  

< script> code< / script> ？

示例

 < script> 
 var cy = cytoscape（{
 
容器：document.getElementById（'cy'），//要在
中渲染的容器
元素：[//以
开头的图形元素列表{//节点a 
数据：{id：'a'} 
}，
 {//节点b 
数据：{id：'b'} 
}，
 {//边缘ab 
数据：{ id：'ab'，来源：'a'，目标：'b'} 
} 
]，
 
样式：[//图形的样式表
 {
选择器：'node'，
样式：{
'background-color'：'＃666'，
'label'：'data（id）'
} 
}，
 
 {
选择器：'edge'，
样式：{
'width'：3，
' line-color'：'#ccc'，
'target-arrow-color'：'#ccc'，
'target-arrow-shape'：'triangle'
} 
} 
]，
 
布局：{
名称：'grid'，
行：1 
} 
 
} ）; 
< / script> 
  

解决方案

写

 < script> 
 // Javascript代码
< / script> 
  

将显示您在开始标记和结束标记之间编写的Javascript代码。
但是，如果在< script> 标记内指定了 src 属性

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

，然后在 JavaScript 代码上找到 https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js 将会呈现。

您可以看到通过在浏览器 URL 框中键入 https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10即可呈现代码/cytoscape.js

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

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

I previously asked how to remotely load cytoscape as a dependency. @GBE provided the following answer

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

So I made an HTML file and copied verbatim introductory example from cytoscape (enclosing it in <script>code</script>. However the result renders nothing. Why? Code below for convenience.

Mini-question: why is source enclosed as:

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

and everything else is

<script> code </script>?

Intro-example

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

解决方案

When you write

<script>
   //Javascript code
</script>

the Javascript code that you write between the opening and closing tag will be rendered. But, If inside the <script> tag there has been specified an src atribute like

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

then the Javascript code found on the https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js will be rendered.
You can see what code will be rendered by typing on the browser URL box the https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.js

This actually is a CDN - Content Delivery Network/Content Distribution Network. Instead of CDN you could use an .js file, too. When you use a .js file then you need to specify the path from the project where it is found.

Edit: Working Sample: https://jsfiddle.net/0py37s5x/2/

这篇关于Cytoscape.js不显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！