4

我需要在 Cytoscape.js 的同一页面中显示两个图形面板。每个面板都包含一个响应来自另一个面板的事件的网络。这在 cytoscape web 的 Flash 版本中曾经很简单。

我声明了两个可视化对象：

var vis1 = new org.cytoscapeweb.Visualization(div_id1, options);
var vis2 = new org.cytoscapeweb.Visualization(div_id2, options);

，它们在声明样式和对象侦听器之后我正在绘制它们：

vis1.draw({ network: networ_json1 , visualStyle: visual_style1});
vis2.draw({ network: networ_json2 , visualStyle: visual_style2});

侦听器很容易实现，因为您可以同时访问这两个对象：

vis1.addListener("select", "nodes", function(evt) {
    for (var i in evt.target){
        node_ids = evt.target[i].data.conN;
        var  data1 = { selected: "1"};
        if(node_ids.length >= 1){
             vis2.updateData("nodes", node_ids, data1)
             vis2.select("nodes",node_ids);
        }
    }
});

现在我想将它升级到 Cytoscape.js，但我坚持在同一页面上显示两个面板。1）让我知道我哪里出错了，2）请给我一个关于下一步如何进行的提示。如果在面板 1 中选择节点，则在面板 2 中选择节点的一个小示例会很棒！

这是test.html：

<html>
    <head>
        <title>Cytoscape.js double panel test</title>
        <script src="js/jquery.js"></script>
        <script src="js/cytoscape.min.js"></script>
        <script src="js/simple.js"></script>
        <script></script>
    </head>
    <body>
    <div id="cy1" style="height:600px;width:800px;border:1px solid #777;"></div>
    <div id="cy2" style="height:600px;width:800px;border:1px solid #777;"></div>
    </body>
</html>

这里是 simple.js。只有面板二会显示一个网络，而不是两者。

$(function(){
    var nodes1 = [];
    for (var i = 0; i < 5; i++) {
        nodes1.push({
            data:{
                id: "n" + i
            },
            group: 'nodes1'
        });
    }

    var edges1 = [];
    edges1.push({ data: { id: 'e1', source: 'n1', target: 'n2' }, group: 'edges1' })
    edges1.push({ data: { id: 'e2', source: 'n1', target: 'n3' }, group: 'edges1' })
    edges1.push({ data: { id: 'e3', source: 'n1', target: 'n4' }, group: 'edges1' })
    edges1.push({ data: { id: 'e4', source: 'n2', target: 'n0' }, group: 'edges1' })
    edges1.push({ data: { id: 'e5', source: 'n3', target: 'n2' }, group: 'edges1' })

    $("#cy1").cytoscape({
        elements: {
            nodes: nodes1,
            edges: edges1
        }
    });

    var nodes2 = [];
    for (var i = 0; i < 5; i++) {
        nodes2.push({
            data:{
                id: "n" + i
            },
            group: 'nodes2'
        });
    }

    var edges2 = [];
    edges2.push({ data: { id: 'e1', source: 'n1', target: 'n2' }, group: 'edges2' })
    edges2.push({ data: { id: 'e2', source: 'n1', target: 'n3' }, group: 'edges2' })
    edges2.push({ data: { id: 'e3', source: 'n1', target: 'n4' }, group: 'edges2' })
    edges2.push({ data: { id: 'e4', source: 'n2', target: 'n0' }, group: 'edges2' })
    edges2.push({ data: { id: 'e5', source: 'n3', target: 'n2' }, group: 'edges2' })

    $("#cy2").cytoscape({
        elements: {
            nodes: nodes2,
            edges: edges2
        }   
    });

});
4

1 回答 1

2

目前，这还没有完全实现。您可以通过以下方式跟踪其进度：https ://github.com/cytoscape/cytoscape.js 。

如果您有特定/紧急需求，请告诉我，我可以优先处理它。

编辑：在 cytoscape.js 中拥有多个图形面板是活跃的紧急功能之一。预计在 3.5 天内完成。该持续时间可以根据需要减少。

于 2012-11-01T22:13:00.587 回答