Question

我需要在Cytoscape.js的同一页面中显示两个图形面板。每个面板都包含一个响应来自其他面板的事件的网络。这在以前的cytoscape网页的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>

这里很简单.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
        }   
    });

});

Answer 1

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

如果您有特殊/紧急需求，请告诉我，我可以优先考虑。

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

在cytoscape.js中使用两个图形面板

1 个答案: