javascriptcytoscape.js

Adjust the zoom scale in Cytoscape.js trigered by the mouse wheel


I am using Cytoscape.js, to draw a Graph. The problem is I want to adjust the zooming scale that the zoom event receives which the mouse wheel triggers.

Now when I scroll forward or backward the zoom increases or decreases more than expected... resulting in a bad user experience...

I couldn't find in the docs how to achieve or set this scale values... I know that the wheel sensitivity is configurable but is not recommended to set.

Is there any way to establish how to scale in each wheel scroll?


Solution

  • The property you're looking for is wheelSensitivity. Adjust his value to change the zooming scale. Be careful with it because it can sometimes affect the render.

    I put it at 0.4 in the example below:

        <!DOCTYPE>
        
        <html>
          <head>
        
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
        
            <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
        
            <style>
              body {
                font-family: helvetica;
                font-size: 14px;
              }
        
              #cy {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 999;
              }
        
              h1 {
                opacity: 0.5;
                font-size: 1em;
              }
            </style>
        
            <script>
              window.addEventListener('DOMContentLoaded', function(){
        
                var cy = window.cy = cytoscape({
                  container: document.getElementById('cy'),
        
                  boxSelectionEnabled: false,
                  autounselectify: true,
                  wheelSensitivity: 0.4,
        
                  style: [
                    {
                      selector: 'node',
                      style: {
                        'background-color': '#11479e'
                      }
                    },
        
                  ],
        
                  elements: {
                    nodes: [
                      { data: { id: 'n0' } },
                      { data: { id: 'n1' } },
                      { data: { id: 'n2' } },
          
                    ],
                    edges: [
                      { data: { source: 'n0', target: 'n1' } },
                      { data: { source: 'n1', target: 'n2' } },
                      { data: { source: 'n0', target: 'n2' } }
        
                    ]
                  }
                });
        
              });
            </script>
          </head>
        
          <body>
            <div id="cy"></div>
          </body>
        
        </html>