javascript - 如何将预先存在的 sigma 实例传递给 sigma.parsers.gexf-6ren

javascript - 如何将预先存在的 sigma 实例传递给 sigma.parsers.gexf

转载作者：行者123 更新时间：2023-11-29 21:58:49

在我的网站上，我通过使用 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 函数更改为以下来完成:

变种实际图；

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;
            }
        );
    }   
}