D3.js Symbol symbolCircle Property
The d3.symbolCircle is a symbol type in D3.js. It is a normal circle that can be used, It is also the default symbol type.
Syntax:
d3.symbolCircle
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 | symbolCircle
</ h3 >
< center >
< svg id = "gfg" width = "100" height = "100" ></ svg >
</ center >
< script >
// Circle Symbol
var sym = d3.symbol()
.type(d3.symbolCircle).size(500);
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 | symbolCircle
</ h3 >
< center >
< svg id = "gfg" width = "100" height = "100" ></ svg >
</ center >
< script >
// Circle Symbol
var sym = d3.symbol()
.type(d3.symbolCircle).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:
Last Updated :
23 Sep, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...