<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
Geeksforgeeks
</
h1
>
<
h3
>D3.js | d3.zoomTransform() Function</
h3
>
<
canvas
width
=
"500"
height
=
"300"
></
canvas
>
<
script
>
var canvas = d3.select("canvas"),
context = canvas.node().getContext("2d"),
width = canvas.property("width"),
height = canvas.property("height"),
radius = 2.5;
var points = d3.range(200).map(phyllotaxis(10));
canvas.call(d3.zoom()
.scaleExtent([1 / 2, 4])
.on("zoom", zoomed));
drawPoints();
var k = 1;
function zoomed() {
context.save();
context.clearRect(0, 0, width, height);
context.translate(d3.event.transform.x, d3.event.transform.y);
context.scale(d3.event.transform.k, d3.event.transform.k);
k = d3.event.transform.k;
drawPoints();
context.restore();
}
function drawPoints() {
context.beginPath();
points.forEach(drawPoint);
context.fill();
}
function drawPoint(point) {
context.moveTo(point[0] + radius, point[1]);
context.arc(point[0], point[1], radius, 0, 2 * Math.PI);
}
function phyllotaxis(radius) {
var theta = Math.PI * (3 - Math.sqrt(5));
return function(i) {
var r = radius * Math.sqrt(i), a = theta * i;
return [
width / 2 + r * Math.cos(a),
height / 2 + r * Math.sin(a)
];
};
}
</
script
>
</
center
>
</
body
>
</
html
>