7

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

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

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

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

4

4 回答 4

8

必须定位您想要拥有图表的 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%;
}

里面的jssigmatest.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;
}
于 2013-03-05T15:40:24.697 回答
2

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

于 2019-03-20T10:51:30.047 回答
0

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

我使用 Firefox，它运行良好。

于 2014-01-08T10:08:45.187 回答
0

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

于 2012-12-10T06:54:50.913 回答