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 remended to set.
Is there any way to establish how to scale in each wheel scroll?
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 remended to set.
Is there any way to establish how to scale in each wheel scroll?
Share asked Oct 15, 2020 at 8:08 piracespiraces 1,3482 gold badges21 silver badges42 bronze badges2 Answers
Reset to default 6The 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./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> You can use the cy.minZoom() and cy.maxZoom() to set the values. The zoom levels shall be maintained between this range on mouse and touch zoom. My example below is to set zoom on click event
cy.on("click","node",function(event) {
cy.minZoom(0.5)
cy.maxZoom(2.5)