Get started with cytoscape-panzoom CDN

deprecated_LGPL-3.0+ licensed

Cytoscape.js PanZoom: plugin for smooth panning and zooming on Cytoscape.js graph visualizations.

Tags:
  • cytoscape
  • cyext

Stable version

Copied!

How to start using cytoscape-panzoom CDN


<!DOCTYPE html>
<html>
<head>
  <style>
    #cy canvas {
      width: 100%;
      height: 100%;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <div id="cy" style="width: 800px; height: 600px; border: 1px solid steelblue;"></div>
  <script src="https://cdn.jsdelivr.net/npm/cytoscape/5.3.0/cytoscape.min.js"></script>
  <script src="https://cdn.cdnhub.io/cytoscape-panzoom/2.5.3/cytoscape-panzoom.min.js"></script>
  <script>
    const cy = cytoscape({
      container: document.getElementById('cy'),
      style: [
        {
          selector: 'node',
          style: {
            shape: 'ellipse',
            width: 10,
            height: 10,
            backgroundColor: '#66b3ff',
            borderWidth: 1,
            borderColor: '#ccc',
            content: 'data(id)'
          }
        }
      ],
      elements: {
        nodes: [
          { data: { id: 'n1' } },
          { data: { id: 'n2' } },
          { data: { id: 'n3' } }
        ],
        edges: [
          { data: { source: 'n1', target: 'n2' } },
          { data: { source: 'n1', target: 'n3' } },
          { data: { source: 'n2', target: 'n3' } }
        ]
      },
      layout: {
        name: 'cose'
      },
      panEnabled: false,
      zoomEnabled: false,
      autoungrabify: false,
      userZoomingEnabled: false,
      userPanningEnabled: false,
      wheelSensitivity: 0.1,
      minZoom: 0.1,
      maxZoom: 5,
      boxSelectionEnabled: false,
      zoom: 1
    });

    cy.panzoom({
      usePanningGestures: true,
      useWheelZooming: true,
      useDoubleClickZoom: false,
      useTouchZoom: true,
      useDoubleTapZoom: false,
      useKeyboardZooming: true,
      minZoom: 0.1,
      maxZoom: 5,
      zoom: 1,
      preventDefault: false,
      onZoom: () => {
        console.log('Zoom level:', cy.zoom());
      }
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions