Как добавить больше узлов в граф cytoscpae

Привет, я пытаюсь преобразовать приложение cytoscape-web 1 в приложение cytoscape-web 2.

У меня есть тривиальный пример использования фиксированного набора элементов, созданного как элемент: часть первоначального вызова cytoscape web. Затем я хочу добавить больше элементов в существующий график. Я попытался с помощью добавления и загрузки.

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>

Буду очень признателен за любые мнения о том, что я делаю неправильно или, возможно, мой пример исправлен.

Большое спасибо

Источник

1 ответ

(1) cy.load() загружает новый график, заменяя то, что уже есть. (2) cy.add() добавляет элементы, но ваши элементы не могут быть отображены без указания какой-либо позиции.

Источник
Другие вопросы по тегам