CytoSpace Ex1

by Vikash Kumar Gupta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.1.4/cytoscape.min.js"></script>
<div id="cy">
  
</div>

CSS

#cy{
  display: block;
  width: 500px;
  height: 200px;
}

JavaScript

var cy =  cytoscape({
	container: document.getElementById('cy'),
  elements:[
  	{
    	data:{ id:'a'}
    },
    {
      data: { id: 'b'}
    },
    {
    	data: {id: 'ab', source: 'a', target: 'b'}
    }
  ],
  style: [
  	{
    	selector: 'node',
      style:{
      	'background-color': 'darkmagenta',
        'label': 'data(id)'
      }
    },
    {
    	selector: 'edge',
      style:{
      	'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  layout:{
  	name: 'grid',
    rows: 1
  }
});