在我的网站中,我使用 sigma.js
可视化 GEXF
图,通过使用 sigma.parsers.gexf
来定位容器并将图表加载到其中。
Javascript
代码与您在 sigma.js website 中找到的代码相同。 :
<script>
sigma.parsers.gexf(
path/to/gexfFile.gexf,
{
container: 'sigma-container'
},
function(s) {
}
);
</script>
这工作正常,但现在我需要能够加载多个图表。为了做到这一点,我想首先创建一个 sigma 实例,以便在调用 sigma.parsers.gexf 时使用它,如该函数的 code 中所述。 。
所以我之前创建了一个 sigma 实例并将其传递给解析器函数。问题是,当我尝试这样做时,图表根本没有绘制,并且 firebug
控制台中没有显示任何错误。
我的测试代码如下:
HTML
<html>
<head>
<script src="sigma.min.js" type="text/javascript"></script>
<script src="plugins/sigma.parsers.gexf.min.js" type="text/javascript"></script>
<script src="myLibrary.js" type="text/javascript"></script>
</head>
<body>
<select id="graphSelector" onChange="showGraph(this.value)">
<option id="defaultValue" value="AENUI" selected>Select...</option>
<option value="AENUI">AENUI</option>
<option value="ICER">ICER</option>
</select>
<div id="foo">
<div class="sigma-parent">
<div id="sigma-container" class="sigma-expand"></div>
</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
myLibrary.js
var actualGraph;
function showGraph(selectedNetwork) {
var selectedFile;
if ((typeof selectedNetwork != 'undefined') && (selectedNetwork !== null)) {
selectedFile = selectedNetwork;
} else {
selectedFile = 'AENUI';
}
var path = window.location.pathname;
path = path.substring(0, path.lastIndexOf('/') + 1);
sigma.parsers.gexf(
path + selectedFile + '.gexf',
actualGraph, //if I change this line to {container: 'sigma-container'} it works
function(s) {
}
);
}
/**
* @method InitForm
*/
function initForm(){
actualGraph = new sigma({container: 'sigma-container'});
var network = document.getElementById("graphSelector").value;
show(network);
}
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', initForm, false);
} else {
window.onload = initForm;
}
附加说明:
- 我知道我可以通过从
DOM
中删除容器元素然后重新创建它来“解决”这个问题,但这是我希望避免的粗略解决方案。 - 在发布此问题之前,我已经在 google 上搜索过示例,但找不到创建 sigma 实例然后传递给解析器函数的示例。我对
Javascript
的了解仍然有限,所以我不确定我在这里做错了什么。
最佳答案
在 sigma.js 论坛询问后终于让它工作了(查看此link以获取更多信息)。必要的更改是在我预先存在的实例上调用 refresh()
。
这可以通过将 showGraph
函数更改为以下内容来完成:
var实际图;
function showGraph(pathToFile) {
var selectedFile;
if ((typeof selectedNetwork != 'undefined') && (selectedNetwork !== null)) {
selectedFile = selectedNetwork;
} else {
selectedFile = 'AENUI';
}
var path = window.location.pathname;
path = path.substring(0, path.lastIndexOf('/') + 1);
if (actualGraph) {
sigma.parsers.gexf(
path + selectedFile + '.gexf',
actualGraph,
function(s) {
s.refresh();
}
);
} else {
sigma.parsers.gexf(
path + selectedFile + '.gexf',
{container: 'sigma-container'},
function(s) {
actualGraph = s;
}
);
}
}
关于javascript - 如何将预先存在的 sigma 实例传递给 sigma.parsers.gexf,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24970640/