The transform.toString() Function in D3.js is used to get a string representing the SVG transform corresponding to this transform.
Syntax:
transform.toString()
Parameters: This function does not accept any parameter.
Return Value: This function returns a string value that can be used to set zoom behavior.
Below programs illustrate the transform.toString() function in D3.js.
Example 1:
HTML
<!DOCTYPE html> < html >
< head >
< meta charset = "utf-8" >
< script src =
</ script >
</ head >
< body >
< center >
< h1 style = "color: green;" >
Geeksforgeeks
</ h1 >
< h3 >D3.js | transform.toString() Function</ h3 >
< svg width = "400" height = "250" ></ svg >
< script >
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var radius = 30;
var circle = {x: 200, y: height /2 } ;
var circle = svg.append("circle")
.attr("cx", circle.x)
.attr("cy", circle.y)
.attr("r", radius)
.attr("fill", "green");
// Defining zoom behaviour
var zoom_handler = d3.zoom()
.on("zoom", zoom_actions);
zoom_handler(circle);
function zoom_actions(){
var transform = d3.event.transform;
// Setting attribute using this method
this.setAttribute("transform",
transform.toString());
}
</ script >
</ center >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!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 >
|
Output: