script src https d3js org d3 v7 min js script script let svg d3 select body append svg svg attr id out svg attr width 500 svg attr height 500 symbolTriangle var sym d3 symbol type d3 symbolTriangle size 900 d3 select out append path attr d sym attr fill green attr transform translate 50 50 var sym6 d3 symbol type d3 symbolSquare size 1500 d3 select out append path attr d sym6 attr fill 2AE7D1 attr transform translate 100 100 rotate 180 details for creating other symbols beyond what s available http using d3js com 05_10_symbols html Note symbols can also be just edges symbolTriangle var sym2 d3 symbol type d3 symbolTriangle size 400 d3 select out append path attr d sym2 attr fill none attr stroke green attr stroke width 5px attr transform translate 150 50 example to show a path but add style dashes Specify the path points var pathInfo x 0 y 60 x 50 y 110 x 90 y 70 x 140 y 100 Specify the function for generating path data var pathLine d3 line x function d return d x y function d return d y curve d3 curveBasis smooth or linear e g https github com d3 d3 shape Append path d3 select out append path attr transform translate 30 100 style stroke dasharray 3 3 This line here attr d pathLine pathInfo attr stroke blue attr stroke width 8 attr fill none dirty polygon example poly x 0 0 y 25 0 x 8 5 y 23 4 x 13 0 y 21 0 x 19 0 y 15 5 let sc 15 0 d3 select out selectAll polygon data poly enter append polygon attr points function d return d map function d return d x sc d y sc join join attr stroke black attr stroke width 2 script
x 90 y 70 x 140 y 100 Specify the function for generating path data var pathLine d3 line x function d return d x y function d return d y curve d3 curveBasis smooth or linear e g https github com d3 d3 shape Append path d3 select out append path attr transform translate 30 100 style stroke dasharray 3 3 This line here attr d pathLine pathInfo attr stroke blue attr stroke width 8 attr fill none dirty polygon example poly x 0 0 y 25 0 x 8 5 y 23 4 x 13 0 y 21 0 x 19 0 y 15 5 let sc 15 0 d3 select out selectAll polygon data poly enter append polygon attr points function d return d map function d return d x sc d y sc join join attr stroke black attr stroke width 2 script