Advertisement
Guest User

Basic cytoscape.js problem

a guest
May 29th, 2014
921
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="description" content="[An example of getting started with Cytoscape.js]" />
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  6. <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
  7.  
  8. <meta charset=utf-8 />
  9. <title>Cytoscape.js initialisation</title>
  10. <script>
  11. $(function(){ // on dom ready
  12.  
  13. $('#cy').cytoscape({
  14.  
  15.   style: cytoscape.stylesheet()
  16.     .selector('node')
  17.       .css({
  18.         'content': 'data(name)',
  19.         'text-valign': 'center',
  20.         'color': 'white',
  21.         'text-outline-width': 2,
  22.         'text-outline-color': '#888'
  23.       })
  24.     .selector('edge')
  25.       .css({
  26.         'target-arrow-shape': 'triangle'
  27.       })
  28.     .selector(':selected')
  29.       .css({
  30.         'background-color': 'black',
  31.         'line-color': 'black',
  32.         'target-arrow-color': 'black',
  33.         'source-arrow-color': 'black'
  34.       })
  35.     .selector('.faded')
  36.       .css({
  37.         'opacity': 0.25,
  38.         'text-opacity': 0
  39.       }),
  40.  
  41.   elements: {
  42.     nodes: [
  43.       { data: { id: 'j', name: 'Jerry' } },
  44.       { data: { id: 'e', name: 'Elaine' } },
  45.       { data: { id: 'k', name: 'Kramer' } },
  46.       { data: { id: 'g', name: 'George' } }
  47.     ],
  48.     edges: [
  49.       { data: { source: 'j', target: 'e' } },
  50.       { data: { source: 'j', target: 'k' } },
  51.       { data: { source: 'j', target: 'g' } },
  52.       { data: { source: 'e', target: 'j' } },
  53.       { data: { source: 'e', target: 'k' } },
  54.       { data: { source: 'k', target: 'j' } },
  55.       { data: { source: 'k', target: 'e' } },
  56.       { data: { source: 'k', target: 'g' } },
  57.       { data: { source: 'g', target: 'j' } }
  58.     ]
  59.   },
  60.  
  61.   ready: function(){
  62.     window.cy = this;
  63.    
  64.     // giddy up...
  65.    
  66.     cy.elements().unselectify();
  67.    
  68.     cy.on('tap', 'node', function(e){
  69.       var node = e.cyTarget;
  70.       var neighborhood = node.neighborhood().add(node);
  71.      
  72.       cy.elements().addClass('faded');
  73.       neighborhood.removeClass('faded');
  74.     });
  75.    
  76.     cy.on('tap', function(e){
  77.       if( e.cyTarget === cy ){
  78.         cy.elements().removeClass('faded');
  79.       }
  80.     });
  81.   }
  82.  
  83. });
  84.  
  85. }); // on dom ready
  86. </script>
  87.  
  88.  </head>
  89. <body>
  90.   <div id="cy"></div>
  91. </body>
  92. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement