Cytoscape.js not displaying?

两盒软妹~` 提交于 2019-12-22 18:05:29

问题


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>

回答1:


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/



来源:https://stackoverflow.com/questions/40299744/cytoscape-js-not-displaying

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!