0

こんにちは、cytoscape-web 1 アプリケーションを cytoscape-web 2 アプリケーションに変換しようとしています。

要素として作成された要素の固定セットを使用した簡単な例があります。サイトスケープ Web への最初の呼び出しの部分です。次に、既存のグラフにさらに要素を追加したいと考えています。add と load を使用してみました。

add は何もしません 失敗はありませんが、既存のグラフにも変更はありません

読み込みエラー:

[19:29:52.005] json is undefined @ http://127.0.0.1:8020/LifeScience/jquery.cytoscapeweb.all.js:1918

コードを再現するのはかなり簡単です

<!DOCTYPE html>

<html>
<head>
    <title>Test Cyto</title>



    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Helvetica, Arial, Verdana, sans-serif;
        }
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        body {
            line-height: 1.5;
            color: #000000;
            font-size: 14px;
        }
        /* The Cytoscape Web container must have its dimensions set. */
        #cy {
            width: 100%;
            height: 50%;
        }
        #note {
            width: 100%;
            height: 25%;
            background-color: #f0f0f0;
            overflow: auto;
        }
        p {
            padding: 0 0.5em;
            margin: 0;
        }
        p:first-child {
            padding-top: 0.5em;
        }
    </style>

</head>

<body>

    <p id="demo">
        Test Demo
    </p>
    <button id="runQ2">
        Do display
    </button>

    <div>
        <p>
            Graph Image
        </p>
    </div>

    <div id="cy" style="width:1200px;height:500px;">
    </div>

    <div id="note">
    </div>
</body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

    </script>

    <script type="text/javascript" src="jquery.cytoscapeweb.all.js">

    </script>


    <script type="text/javascript">


$(document).ready(function() {
$("button#runQ2").click(function() {
    draw_graph();
});
});

function draw_graph() {

$("#cy").cytoscapeweb({

    elements : {
        nodes : [{
            data : {
                id : "a"
            }
        }, {
            data : {
                id : "b"
            }
        }, {
            data : {
                id : "c"
            }
        }],

        edges : [{
            data : {
                id : "ab",
                source : "a",
                target : "b"
            }
        }, {
            data : {
                id : "bc",
                source : "b",
                target : "c"
            }
        }, {
            data : {
                id : "ca",
                source : "c",
                target : "a"
            }
        }, {
            data : {
                id : "ac",
                source : "a",
                target : "c"
            }
        }]
    },
    ready : function(cth) {
        //cth.add({ group: "nodes", data: { id: "n0" } });
        cth.load([{
            data : {
                id : "n1"
            },
            group : "nodes"
        }, {
            data : {
                id : "n2"
            },
            group : "nodes"
        }, {
            data : {
                id : "e1",
                source : "n1",
                target : "n2"
            },
            group : "edges"
        }]);
        alert("in ready function" + graphArray);
    }
})
}
</script>       
</html>

私が間違っていること、またはおそらく私の例が修正されたことについての意見を本当に感謝します。

ありがとうございました

4

1 に答える 1

0

(1)cy.load()新しいグラフをロードし、既存のものを置き換えます。(2)cy.add()要素を追加しますが、位置を指定しないと要素を表示できません。

于 2012-06-06T15:38:45.740 に答える