无法使用Sigma.js显示任何图形 [英] Can't display any graph with Sigma.js
问题描述
我想要在Web界面上显示大型网络图。经过几天的搜索，我决定使用Sigma.js，因为它看起来很简单，并且与HTML5兼容。
问题在于我无法在Sigma.js网页上显示任何图表示例，即使我使用作者在Sigma.js主页上的最小代码。我甚至复制粘贴整个网页，右键点击代码，但徒劳无功（像这样）。我已经将所有必需的文件粘贴到简单的.html文件所在的文件夹（css文件，js文件，甚至是示例需要的.gexf文件），但我只能得到一个带有黑色矩形的页面，仅此而已。该图不显示。我究竟做错了什么？
我需要首先构建sigma.js文件，正如作者在GitHub库中的代码库中提到的那样？我需要这个工具来可视化图表（我将用数据即时提供图表），但我甚至无法尝试一些简单的代码！我甚至遵循那个指导并且做了每一步，但是我什么都不能工作。 Webstudio：Microsoft Expression Web 4和OS：Windows 8 Pro（我试图在IE10，FF17和Chrome 23中打开网页）。
您想要图的div必须是绝对定位。我认为这是一个画布问题。
所以html
< ;！DOCTYPE html>
< html>
< head>
< script src =http://sigmajs.org/js/sigma.min.js>< / script>
< script src =/ js / sigmatest.js>< / script>
< link rel =stylesheethref =/ css / sigma.css>
< / head>
< body>
< div id =sigma-parent>
< div id =sigma-example>
< / div>
< / div>
< / body>
< / html>
＃sigma-parent {
width：500px;
height：500px;
职位：亲属;
}
＃sigma-example {
position：absolute;
宽度：100％;
身高：100％;
sigmatest.js
函数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;
}
I want to visualize a large network graph on a web interface. After a few days of search, I decided to use Sigma.js because it looks simple and it's HTML5 compatible.
The problem is that I can't display any graph example from Sigma.js web page, even when I use the minimal code that the author has on Sigma.js's homepage. I even copy-pasted entire web pages, with right click-view code, but in vain (like this). I have pasted all the necessary files in the same folder that the simple .html file is located (css files, js files and even the .gexf file that the example needs) but I only get a page with a black rectangle and nothing more. The graph isn't displayed. What am I doing wrong?
Do I need to first build the sigma.js file, as the author mentions in the code repository of the library in GitHub? I need this tool to visualize the graph (I'm going to feed the graph with data on the fly) but I can't even experiment with some simple code! I even followed that "guide" and did every step but I can't anything working.
Webstudio: Microsoft Expression Web 4 and OS: Windows 8 Pro (I tried opening the web pages in IE10, FF17 and Chrome 23).
The div you want to have your graph has to be absolute positioned. I think it's a canvas issue.
so the 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>
the css
#sigma-parent {
width: 500px;
height: 500px;
position: relative;
}
#sigma-example {
position: absolute;
width: 100%;
height: 100%;
}
the 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;
}
这篇关于无法使用Sigma.js显示任何图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
