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

标签 javascript graph-visualization sigma.js

在我的网站中,我使用 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/

相关文章:

d3.js - D3.js 是 Neo4j Graph DB 数据实时可视化的正确选择吗

python - 如何存储用于在 Gephi 中可视化的 networkx 图?

Javascript 高性能图形可视化工具包(500-1000节点)

javascript - 在 Javascript 中交换整个数组

javascript - Jasmine 在浏览器中传递,文件在 grunt-contrib-jasmine 中

javascript - 如何使用 Sigmajs 和 Neo4j 通过输入搜索检索节点?

javascript - http ://sigmajs. org/les 教程 - 为什么我的 Canvas 高度为 0?

javascript - 当作为 web 应用程序运行时,对象在 IE11 上不支持属性或方法 'create',在浏览器中直接打开 HTML 时正常

javascript - Alasql:UNION(或UNION ALL)仅给出表1的结果

javascript - 是 `history.go` 不区分大小写