Cytoscape demo

by youssef moudine

HTML

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

CSS

body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.foo{
  border: 1px solid red !important
}
.bar{
  border: 1px solid blue
}

JavaScript

cytoscape({

  container: document.getElementById('cy'),

  elements: [ // flat array of nodes and edges
    { // node n1
      group: 'nodes', // 'nodes' for a node, 'edges' for an edge
      data: { // element data
        id: 'node 1',
        parent: 'keyword 1'
      },
      position: {
        x: 100,
        y: 100
      },
      selected: false,
      selectable: false,
      locked: false,
      grabbable: true,
      pannable: false,
      classes: ['foo', 'bar']
    },

    { // node n2
      data: { id: 'node 2', parent: 'parent 1' },
      renderedPosition: { x: 200, y: 200 }
    },

    { // node n3
      data: { id: 'node 3', parent: 'parent 1'},
      position: { x: 123, y: 234 }
    },

    { // node nparent
      data: { id: 'parent 1' }
    },

    { // edge e1
      data: {
        id: 'edge 1',
        source: 'node 1',
        target: 'node 2'
      }
		},
    
    { // edge e2
      data: {
        id: 'edge 2',
        source: 'node 1',
        target: 'node 3'
      }
    }
  ],

  layout: {
    name: 'preset'
  },

  // so we can see the ids
  style: [
    {
      selector: 'node',
      style: {
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'label': 'data(id)'
      }
    }
  ]

});