cytoscape.js + requirejs + popper

by Rishi Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <h3> cytoscape.js + requirejs + popper</h3> <br>

  <div class="row">
    <div class="col-md-8">
      <div id="cy" class="cytoscape"></div>
    </div>
  </div>
</div>

CSS

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

.cytoscape {
  height: 350px;
  width: 100%;
  border: solid grey 1px;
}

JavaScript

requirejs.config({
  paths: {
    'jquery': 'https://code.jquery.com/jquery-1.12.4.min',
    'cytoscape': 'https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.16/cytoscape.min',
    'cytoscape-popper': 'https://cdn.rawgit.com/cytoscape/cytoscape.js-popper/master/cytoscape-popper',
    'dagre': 'https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.2/dagre.min',
    'cytoscape-dagre': 'https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-dagre.min',
    'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min',
  },
  shim: {
    'bootstrap': ['jquery']
  },
  packages: [{
    name: 'popper.js',
    location: 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/',
    main: 'popper.js'
  }]
});


require(['jquery', 'cytoscape', 'cytoscape-popper', 'cytoscape-dagre', 'bootstrap'], function($, cytoscape, popper, dagre) {
  //
  popper(cytoscape);
  dagre(cytoscape);
  //
  var cy = window.cy = cytoscape({
    container: document.getElementById('cy'),
    layout: {
      name: 'dagre',
      nodeSep: 100,
      edgeSep: 100,
      rankSep: 100,
      rankDir: 'LR'
    },
    style: [{
        selector: 'node',
        style: {
          'content': 'data(name)',
          'text-valign': 'center',
          'text-wrap': 'wrap',
          'padding-left': '10px',
          'padding-right': '10px',
          'padding-top': '10px',
          'padding-bottom': '10px',
          'shape': 'roundrectangle',
          'width': 'label',
          'height': 'label',
          'background-color': ' #fff',
          'color': 'black',
          'border-width': '1px',
          'border-color': '#333'
        }
      },
      {
        selector: 'edge',
        style: {
          'label': 'data(label)',
          'target-arrow-shape': 'triangle',
          'target-arrow-color': 'black',
          'source-arrow-color': 'black',
          'edge-text-rotation': 'autorotate',
          'line-color': '#333',
          'width': 1.5,
          'curve-style':...