2012-06-06 2 views
0

Привет Я пытаюсь преобразовать приложение cytoscape-web 1 в приложение cytoscape-web 2.Как добавить больше узлов в цитоскоп cytoscpae

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

добавить делает ничего, не провал, но и никаких изменений в существующий графа

нагрузка получает и ошибка:

[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> 

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

Благодаря Большая Оценил

ответ

0

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

+0

Так что я должен специально добавить позицию для каждого элемента для операции cy.load, иначе я получу ошибку? – user1438710

+0

Да для узлов с 'cy.add()', в противном случае, где бы размещались узлы? Для 'cy.load()', макет может использоваться для предоставления позиций узлов. – maxkfranz

Смежные вопросы