

In [1]:

    
%%javascript
require.config({
   paths: {cytoscape: 'http://localhost:8099/js/cytoscape-2.7.10'}
   })



In [2]:

    
%%javascript

require(['cytoscape'], function(cytoscape){
//define('cyjs', ['cytoscape'], function(cytoscape){
    $("#cyDiv").remove();
    element.append("<div id='cyDiv'></div>")
    $("#cyDiv").width("700px");
    $("#cyDiv").height("600px");
    
    var cy = cytoscape({
      container: document.getElementById('cyDiv'),
      elements: {
         nodes: [
           {data: {id: 'a', name: 'Node A', type: 'big' }},
           {data: {id: 'b', name: 'Node B', type: 'little'}},
           ],
        edges: [
           {data: {source: 'a', target: 'b'}},
           {data: {source: 'b', target: 'a'}}
           ]
        },
  
     style: [
        {selector: 'node',
           style: {
              'text-valign': 'center',
              'text-halign': 'center',
              'border-color': 'red',
              'background-color': 'white',
              'border-width': 1,
              'label': 'data(name)',
              'height': 100,  // defaults
              'width': 100
              }},
        {selector: "node[type='big']",
          style: {
             'height': 150,
             'width': 150,
             'shape': 'roundrectangle'
             }},
        {selector: "node[type='little']",
          style: {
             'height': 50,
             'width': 80
             }},
        {selector: 'edge',
           style: {
             'width': '1px',
             'line-color': 'blue',
             'target-arrow-shape': 'triangle',
             'target-arrow-color': 'black',
             'curve-style': 'bezier'
             }}
         ],
              
     ready: function(){
        console.log("small cyjs network ready");
        } // ready
       }); // cytoscape

});