无法使用 Sigma.js 显示任何图表答案

【问题标题】：Can't display any graph with Sigma.js无法使用 Sigma.js 显示任何图表
【发布时间】：2012-11-16 16:19:27
【问题描述】：

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

问题是我无法显示来自 Sigma.js 网页的任何图形示例，即使我使用作者在 Sigma.js 主页上拥有的最少代码也是如此。我什至用右键单击查看代码复制粘贴了整个网页，但徒劳无功（like this）。我已将所有必要的文件粘贴到简单的 .html 文件所在的同一文件夹中（css 文件、js 文件，甚至示例所需的 .gexf 文件），但我只得到一个带有黑色矩形的页面，仅此而已。图表不显示。我究竟做错了什么？

我是否需要首先构建 sigma.js 文件，正如作者在 GitHub 库的代码存储库中提到的那样？我需要这个工具来可视化图表（我将动态地为图表提供数据）但我什至无法尝试一些简单的代码！我什至关注that "guide" 并做了每一步，但我什么都做不了。

Webstudio：Microsoft Expression Web 4 和操作系统：Windows 8 Pro（我尝试在 IE10、FF17 和 Chrome 23 中打开网页）。

【问题讨论】：

这个问题更适合 Sigma.js 论坛。
@PiXel1225：如果对你有用，你能接受一个答案吗？
@MERose：所有答案都是在我最初的问题之后 6 个月到一年发布的。经过这么长时间，我显然已经找到了答案，但现在我不记得出了什么问题来将某事标记为可能的答案。

标签： javascript graph sigma.js

【解决方案1】：

确保您已下载此文件http://sigmajs.org/data/arctic.gexf 并在代码中正确引用了路径

【讨论】：

试试这个raw.githubusercontent.com/jacomyal/sigma.js/master/examples/…

【解决方案2】：

您希望图表的 div 必须位于 absolute 位置。我认为这是画布问题。

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

CSS

#sigma-parent {
  width: 500px;
  height: 500px;
  position: relative;
}    

#sigma-example {
  position: absolute;
  width: 100%;
  height: 100%;
}

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

【讨论】：

【解决方案3】：

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

我使用 Firefox，它运行良好。

【讨论】：

【解决方案4】：

这可能对很多人没有帮助，但就我而言，只是我没有为每个节点指定x 或y 属性。我试图使用forceAtlas2 算法自动“放置”我的节点，但没有意识到必须先将它们绘制在某个位置才能应用布局。

【讨论】：