Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="description" content="[An example of getting started with Cytoscape.js]" />
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
- <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
- <meta charset=utf-8 />
- <title>Cytoscape.js initialisation</title>
- <script>
- $(function(){ // on dom ready
- $('#cy').cytoscape({
- style: cytoscape.stylesheet()
- .selector('node')
- .css({
- 'content': 'data(name)',
- 'text-valign': 'center',
- 'color': 'white',
- 'text-outline-width': 2,
- 'text-outline-color': '#888'
- })
- .selector('edge')
- .css({
- 'target-arrow-shape': 'triangle'
- })
- .selector(':selected')
- .css({
- 'background-color': 'black',
- 'line-color': 'black',
- 'target-arrow-color': 'black',
- 'source-arrow-color': 'black'
- })
- .selector('.faded')
- .css({
- 'opacity': 0.25,
- 'text-opacity': 0
- }),
- elements: {
- nodes: [
- { data: { id: 'j', name: 'Jerry' } },
- { data: { id: 'e', name: 'Elaine' } },
- { data: { id: 'k', name: 'Kramer' } },
- { data: { id: 'g', name: 'George' } }
- ],
- edges: [
- { data: { source: 'j', target: 'e' } },
- { data: { source: 'j', target: 'k' } },
- { data: { source: 'j', target: 'g' } },
- { data: { source: 'e', target: 'j' } },
- { data: { source: 'e', target: 'k' } },
- { data: { source: 'k', target: 'j' } },
- { data: { source: 'k', target: 'e' } },
- { data: { source: 'k', target: 'g' } },
- { data: { source: 'g', target: 'j' } }
- ]
- },
- ready: function(){
- window.cy = this;
- // giddy up...
- cy.elements().unselectify();
- cy.on('tap', 'node', function(e){
- var node = e.cyTarget;
- var neighborhood = node.neighborhood().add(node);
- cy.elements().addClass('faded');
- neighborhood.removeClass('faded');
- });
- cy.on('tap', function(e){
- if( e.cyTarget === cy ){
- cy.elements().removeClass('faded');
- }
- });
- }
- });
- }); // on dom ready
- </script>
- </head>
- <body>
- <div id="cy"></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement