Question

在我的网站中，我使用GEXF使用sigma.js可视化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中删除容器元素然后重新创建它来“解决”这个问题，但这是一个我希望避免的粗略解决方案。
在发布此问题之前，我已经搜索了一些示例，但找不到创建sigma实例的位置，然后将其传递给解析器函数。我对Javascript的了解仍然有限，所以我不确定我在这里做错了什么。

Answer 1

最后在 sigma.js 论坛上询问后（请查看link了解更多信息）。必要的更改是在我预先存在的实例上调用refresh()。

这可以通过将showGraph功能更改为以下内容来完成：

var actualGraph;

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

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

1 个答案: