Cytoscape：TypeError 即使有教程答案

【问题标题】：Cytoscape: TypeError even with the tutorialCytoscape：TypeError 即使有教程
【发布时间】：2017-05-16 10:21:48
【问题描述】：

我想用Cytoscape.js，所以我复制粘贴了他们的tutorial：

var cy = cytoscape({
    container: document.getElementById('cy')
});

...我得到了这个（在 Firefox 控制台上）：

TypeError: r is null

还有这个（在 Safari 控制台上）：

TypeError: null is not an object (evaluating 'r.className')

Chrome上依旧报错，一直提示cytoscape.min.js的第39行。

当然，我有一个 HTML <div id="cy"></div> 元素。

为什么会出现此错误？另外，我尝试添加一些节点，它们在 JSFiddle 上呈现，而不是在浏览器上呈现......

【问题讨论】：

标签： javascript cytoscape.js

【解决方案1】：

错误原因如下：我试图在页面加载之前初始化 Cytoscape 图，因此 Cytoscape 在 HTML 中找不到任何 #cy div。

解决方案只是将初始化包装在一个函数中，并在页面加载后调用此函数（使用<body onload="setupMyGraph();"> ... </body>）。

【讨论】：

【解决方案2】：

afaik，这应该可以解决您的问题

document.addEventListener("DOMContentLoaded", function() {
  cy = cytoscape({
    container: document.getElementById("cy"),
  })
 <cytoscape stuff like adding nodes, setting style, ...>
})

【讨论】：

是的，这也是正确的。我认为我的答案和你的答案是等价的，但显然你的解决方案更快：jsperf.com/onload-vs-domcontentloaded