4

Cytoscape.js の同じページに 2 つのグラフ パネルを表示する必要があります。各パネルには、他のパネルからのイベントに応答するネットワークが含まれています。これは、Cytoscape Web の Flash バージョンでは単純でした。

2 つの視覚化オブジェクトを宣言していました。

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 にアップグレードしたいのですが、同じページに 2 つのパネルを表示することに行き詰まりました。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 があります。両方ではなく、パネル 2 のみがネットワークを表示します。

$(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 で複数のグラフ パネルを持つことは、アクティブで緊急の機能の 1 つです。推定 3.5 日で完了します。この期間は、必要に応じて短縮できます。

于 2012-11-01T22:13:00.587 に答える