The zoom.wheelDelta() function of D3.js is used to set the wheel delta function to the specified function and returns the zoom behaviour.
Syntax:
zoom.wheelDelta([delta])
Parameters: This function accepts a single parameter as mentioned above and described below.
- delta: This parameter is used to set the wheel delta function to the specified function.
Return Value: This function returns the zoom behaviour.
Below programs illustrate the zoom.wheelDelta() function in D3.js
Example 1:
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
</script>
<style>
svg text {
fill: green;
font: 20px sans-serif;
text-anchor: center;
}
rect {
pointer-events: all;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | zoom.wheelDelta() Function</h3>
<svg></svg>
<script>
var width = 400;
var height = 200;
var svg = d3.select("svg")
.attr("width",width)
.attr("height",height);
// The scale used to display the axis.
var scale = d3.scaleLinear()
.range([10,width-20])
.domain([0,100]);
var shadowScale = scale.copy();
var axis = d3.axisBottom()
.scale(scale);
var g = svg.append("g")
.attr("transform","translate(0,50)")
.call(axis);
// Standard zoom behavior:
var zoom = d3.zoom()
.scaleExtent([1,10])
.translateExtent([[0, 0], [width, height]])
.wheelDelta(myDelta)
.on("zoom", zoomed);
// Call the Zoom.
var rect = svg.append("rect")
.attr("width",width)
.attr("height",height)
.attr("fill","none")
.call(zoom);
function zoomed() {
var t = d3.event.transform;
scale.domain(t.rescaleX(shadowScale).domain());
g.call(axis);
}
function myDelta() {
return -d3.event.deltaY *
(d3.event.deltaMode ? 120 : 1) / 1500;
}
</script>
</center>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
</script>
<style>
rect {
fill: green;
opacity: 0.5;
stroke: black;
stroke-width: 1px;
}
svg {
border: 1px solid;
font: 13px sans-serif;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
Geeksforgeeks
</h1>
<h3>D3.js | zoom.wheelDelta() Function</h3>
<div id="GFG">
</div>
<script>
var width = 400;
var height=250;
var size=30;
var svg = d3.select('#GFG')
.append('svg')
.attr('width', width)
.attr('height', height)
var g = svg.append('g')
var numrects = 100;
var rects = [];
for (var i = 0; i < numrects; i++)
rects.push({'x': 1 +
Math.floor(Math.random() * width),
'y': 1+Math.floor(Math.random() * height),
'h': 3+Math.floor(Math.random() * size),
'w': 3+Math.floor(Math.random() * size)
});
g.selectAll('rect')
.data(rects)
.enter()
.append('rect')
.attr('x', function(d) { return d.x; })
.attr('y', function(d) { return d.y; })
.attr('height', function(d) { return d.h; })
.attr('width', function(d) { return d.w; })
.classed('no-zoom', true)
var zoomed = d3.zoom()
.wheelDelta(myDelta)
.scaleExtent([1,10])
.on('zoom', function(d){
g.attr('transform', d3.event.transform);
});
svg.call(zoomed);
function myDelta() {
return d3.event.deltaY / 10;
}
</script>
</center>
</body>
</html>
|
Output: