The transform.translate() function in D3.js library is used to get the transformation whose translation tx1 and ty1 is equal to tx0 + tk x and ty0 + tk y, where tx0 and ty0 is the transform’s translation and tk is the transform’s scale.
Syntax:
transform.translate(x, y)
Parameters: This function accepts the following parameter as mentioned above and described below.
- x, y: These parameters are the translation point argument.
Return value: This function returns the transformed zoom behaviour.
Below programs demonstrates the transform.translate() function of D3.js library.
Example 1:
HTML
<!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 >
|
Output:
Example 2:
HTML
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
< title >
D3.js | transform.translate() Function
</ title >
</ script >
< style >
circle {
opacity: 0.7;
fill: green;
}
</ style >
</ head >
< body >
< center >
< h1 style = "color: green;" >
Geeksforgeeks
</ h1 >
< h3 >D3.js | transform.translate() 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', 400)
.attr('height', 200)
.style("background", "orange")
.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", 100)
.attr("cy", 100)
.attr('r', 30);
function handleZoom() {
if (zoomable) {
zoomable.attr("transform",
d3.event.transform);
}
};
</ script >
</ center >
</ body >
</ html >
|
Output: