<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>
D3.js | transform.translate() Function
</
title
>
</
script
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green;"
>
Geeksforgeeks
</
h1
>
<
h3
>D3.js | transform.translate() Function</
h3
>
<
svg
height
=
"200px"
width
=
"400px"
>
<
g
id
=
"GFG"
transform
=
"translate(25,25) scale(0.25)"
>
</
g
>
</
svg
>
<
script
>
var svg = d3.select("#GFG");
svg.append("rect").attr({
"x": 0, "y": 0, "height": 100,
"width": 100, "fill": "yellow"
})
svg.append("rect").attr({
"x": 100, "y": 100, "height": 100,
"width": 100, "fill": "orange"
})
svg.append("rect").attr({
"x": 0, "y": 100, "height": 100,
"width": 100, "fill": "red"
})
svg.append("rect").attr({
"x": 100, "y": 0, "height": 100,
"width": 100, "fill": "purple"
})
var zoom = d3.behavior.zoom()
.on("zoom", function () {
var val_1 = d3.event.translate;
var val_scale = d3.event.scale;
svg.attr("transform", "translate("
+ val_1[0] + "," + val_1[1]
+ ") scale(" + val_scale + ")")
})
.scaleExtent([1, 10])
.scale(1).translate([0, 0])
d3.select("svg").call(zoom)
d3.selectAll("rect").on("mousedown",
function () {
var scale = Math.random() * 3;
var translate = [(Math.random() * 10,
Math.random() * 10)]
zoom.scale(scale);
zoom.translate(translate);
// New transition
var T = svg.transition().duration(500)
zoom.event(T);
})
</
script
>
</
center
>
</
body
>
</
html
>