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

user_4064162 0
Viewed 1437

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?

cytoscape.js javascript
1 Answers

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>

user_81928410
Related