我想在 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 中打开网页)。
最佳答案
您想要图表的 div 必须是 absolute 定位的。我认为这是 Canvas 问题。
所以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;
}
关于javascript - 无法使用 Sigma.js 显示任何图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13611443/