D3.js symbol.size() Method
Last Updated :
14 Sep, 2020
The symbol.size() method can be used to change the size of the symbol.
Syntax:
symbol.size([size])
Parameters: This function accepts a single parameter as mentioned above and described below:
- size: This is the size in square pixels or the area to be set.
Return Value: This method has no return value.
Example 1:
HTML
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< script src =
</ script >
</ head >
< body >
< h1 style = "text-align: center; color: green;" >
GeeksforGeeks
</ h1 >
< h3 style = "text-align: center;" >
D3.js | symbol.size() Method
</ h3 >
< center >
< svg id = "gfg" width = "100" height = "100" ></ svg >
</ center >
< script >
var sym = d3.symbol().size(300);
d3.select("#gfg")
.append("path")
.attr("d", sym)
.attr("fill", "green")
.attr("transform", "translate(50,50)");
</ script >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< script src =
</ script >
</ head >
< body >
< h1 style = "text-align: center; color: green;" >
GeeksforGeeks
</ h1 >
< h3 style = "text-align: center;" >
D3.js | symbol.size() Method
</ h3 >
< center >
< svg id = "gfg" width = "100" height = "100" ></ svg >
</ center >
< script >
var sym = d3.symbol().size(500);
d3.select("#gfg")
.append("path")
.attr("d", sym)
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", "5px")
.attr("transform", "translate(50,50)");
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...