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