<!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.transform() Function</
h3
>
<
button
id
=
"reset"
>Reset</
button
><
br
/>
<
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]])
.on("zoom", zoomed);
// Call the Zoom.
var rect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "none")
.call(zoom);
d3.select("#reset")
.on("click", function() {
// Create an identity transform
var transform = d3.zoomIdentity;
// Apply the transform:
rect.call(zoom.transform, transform);
})
function zoomed() {
var t = d3.event.transform;
scale.domain(t.rescaleX(shadowScale).domain());
g.call(axis);
}
</
script
>
</
center
>
</
body
>
</
html
>