The d3.symbolDiamond property is a symbol type in D3.js. It is a diamond-shaped symbol type that can be used.
Syntax:
d3.symbolDiamond
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 | symbolDiamond
</ h3 >
< center >
< svg id = "gfg" width = "100" height = "100" ></ svg >
</ center >
< script >
// symbolDiamond
var sym = d3.symbol()
.type(d3.symbolDiamond).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 | symbolDiamond
</ h3 >
< center >
< svg id = "gfg" width = "100" height = "100" ></ svg >
</ center >
< script >
// symbolDiamond
var sym = d3.symbol()
.type(d3.symbolDiamond).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: