调整鼠标滚轮触发的 Cytoscape.js 缩放比例

Question

我正在使用 Cytoscape.js 绘制图形。问题是我想调整鼠标滚轮触发的 zoom 事件接收的缩放比例。

现在，当我向前或向后滚动时，缩放比预期增加或减少更多...导致糟糕的用户体验...

我在文档中找不到如何实现或设置此比例值... 我知道滚轮灵敏度是可配置的，但不建议设置。

有什么方法可以确定每个轮子滚动的缩放比例吗？

Answer 1

您要查找的属性是 wheelSensitivity。调整他的值来改变缩放比例。小心它，因为它有时会影响渲染。

我在下面的示例中将其设置为 0.4：

    <!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>

调整鼠标滚轮触发的 Cytoscape.js 缩放比例

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

javascript

cytoscape.js