The d3.symbolStar is a symbol type in D3.js. It is a star-shaped symbol type that can be used.
Syntax:
d3.symbolStar
Example 1:
<!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 | symbolStar
</ h3 >
< center >
< svg id = "gfg" width = "100"
height = "100" ></ svg >
</ center >
< script >
// symbolStar
var sym =
d3.symbol().type(d3.symbolStar).size(500); d3.select("#gfg")
.append("path")
.attr("d", sym)
.attr("fill", "green")
.attr("transform", "translate(50, 50)");
</ script >
</ body >
</ html >
|
Output:
Example 2:
<!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 | symbolStar
</ h3 >
< center >
< svg id = "gfg" width = "100"
height = "100" ></ svg >
</ center >
< script >
// symbolStar
var sym =
d3.symbol().type(d3.symbolStar).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: