Question

我想在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中打开网页）。

Answer 1

您希望图表的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;
}

Answer 2

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

Answer 3

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

我使用firefox工作正常。

Answer 4

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

无法使用Sigma.js显示任何图形

4 个答案: