Javascript Can'；t使用Sigma.js显示任何图形_Javascript_Graph_Sigma.js

Javascript Can'；t使用Sigma.js显示任何图形

javascript graph

Javascript Can'；t使用Sigma.js显示任何图形,javascript,graph,sigma.js,Javascript,Graph,Sigma.js,我想在web界面上可视化一个大型网络图。经过几天的搜索，我决定使用Sigma.js，因为它看起来很简单，而且兼容HTML5 问题是我无法显示Sigma.js网页中的任何图形示例，即使我使用了作者在Sigma.js主页上的最小代码。我甚至用右键单击查看代码复制粘贴的整个网页，但徒劳（）。我已经将所有必要的文件粘贴到了simple.html文件所在的文件夹中（css文件、js文件，甚至示例所需的.gexf文件），但我只得到一个带有黑色矩形的页面，没有其他内容。图形不显示。我做错了什么我是否需要首先

我想在web界面上可视化一个大型网络图。经过几天的搜索，我决定使用Sigma.js，因为它看起来很简单，而且兼容HTML5

问题是我无法显示Sigma.js网页中的任何图形示例，即使我使用了作者在Sigma.js主页上的最小代码。我甚至用右键单击查看代码复制粘贴的整个网页，但徒劳（）。我已经将所有必要的文件粘贴到了simple.html文件所在的文件夹中（css文件、js文件，甚至示例所需的.gexf文件），但我只得到一个带有黑色矩形的页面，没有其他内容。图形不显示。我做错了什么

我是否需要首先构建sigma.js文件，正如作者在GitHub库的代码库中提到的那样？我需要这个工具来可视化图形（我将动态地为图形提供数据），但我甚至不能用一些简单的代码进行实验！我甚至跟随并做了每一步，但我不能做任何工作

Webstudio:MicrosoftExpressionWeb4和OS:Windows8Pro（我试着用IE10、FF17和Chrome23打开网页）

确保已下载此文件

并在代码中正确引用了路径

您想要拥有图形的div必须是

绝对

定位的。我认为这是一个画布问题

所以html

<!DOCTYPE html>
<html>
  <head>
    <script src="http://sigmajs.org/js/sigma.min.js"></script>
    <script src="/js/sigmatest.js"></script>
    <link rel="stylesheet" href="/css/sigma.css">
  </head>
  <body>
    <div id="sigma-parent">
      <div id="sigma-example">
      </div>
    </div>
  </body>
</html>

sigmatest.js中的js

function init() {
  var sigRoot = document.getElementById('sigma-example');
  var sigInst = sigma.init(sigRoot);
  sigInst.addNode('hello',{
    label: 'Hello',
    x: 10,
    y: 10,
    size: 5,
    color: '#ff0000'
  }).addNode('world',{
    label: 'World !',
    x: 20,
    y: 20,
    size: 3,
    color: '#00ff00'
  }).addEdge('hello_world','hello','world').draw();
}

if (document.addEventListener) {
  document.addEventListener('DOMContentLoaded', init, false);
} else {
  window.onload = init;
}

Sigma js存在浏览器兼容性问题。尝试更新bowser或使用其他浏览器

我使用firefox，效果很好。

这可能对很多人没有帮助，但在我的例子中，我只是没有为每个节点指定

或

属性。我试图使用

forceAtlas2

算法自动“放置”我的节点，没有意识到它们必须先画在某个位置，然后才能应用布局。

这是一个更适合Sigma.js论坛的问题。@PiXel1225:如果答案适合你，你能接受吗？@MERose:所有答案都是在我最初的问题提出6个月到一年后发布的。经过这么长时间，我显然已经找到了我的答案，现在我不记得什么地方出了问题，把某个东西标记为可能的答案或不可能。试试这个

function init() {
  var sigRoot = document.getElementById('sigma-example');
  var sigInst = sigma.init(sigRoot);
  sigInst.addNode('hello',{
    label: 'Hello',
    x: 10,
    y: 10,
    size: 5,
    color: '#ff0000'
  }).addNode('world',{
    label: 'World !',
    x: 20,
    y: 20,
    size: 3,
    color: '#00ff00'
  }).addEdge('hello_world','hello','world').draw();
}

if (document.addEventListener) {
  document.addEventListener('DOMContentLoaded', init, false);
} else {
  window.onload = init;
}