<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
</script>
<style>
rect {
fill: blue;
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.interpolate() Function</h3>
<div id="GFG">
</div>
<script>
var width = 400;
var height = 250;
var length = 30;
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() * length),
'w': 3 + Math.floor(Math.random() * length)
});
var zoomed = d3.zoom()
.interpolate(d3.interpolate)
.on('zoom', function (d) {
g.attr('transform',
d3.event.transform);
});
var svg = d3.select('#GFG')
.append('svg')
.attr('width', width)
.attr('height', height)
var g = svg.append('g')
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)
svg.call(zoomed);
</script>
</center>
</body>
</html>