<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
script
src
=
</
script
>
<
style
>
circle {
opacity: 0.7;
fill: #9a05a3;
}
</
style
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
Geeksforgeeks
</
h1
>
<
h3
>D3.js | transform.toString() Function</
h3
>
<
svg
></
svg
>
<
script
>
var transform = d3.zoomIdentity
.translate(100, 0).scale(1);
var zoom = d3.zoom().on("zoom", handleZoom);
var svg = d3.select("svg")
.attr('width', 300)
.attr('height', 250)
.style("background", "#31c460")
.call(zoom)
.call(zoom.transform, transform);
var zoomable = svg
.append("g")
.attr("class", "zoomable")
.attr("transform", transform);
var circles = zoomable.append('circle')
.attr("id", "circles")
.attr("cx", 50)
.attr("cy", 125)
.attr('r', 30);
function handleZoom(){
if (zoomable) {
// Setting attribute using this method
zoomable.attr("transform",
d3.event.transform.toString());
}
};
</
script
>
</
center
>
</
body
>
</
html
>