Lef*_*008 7 javascript graph sigma.js
我想在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中打开网页).
您想要图表的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%;
}
js in sigmatest.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;
}
| 归档时间： |
|
| 查看次数： |
6241 次 |
| 最近记录： |