凱開 x 慵懶日子

發現最常畫的就是線段、圓形跟矩形

可是發現其實要先把SVG弄懂才行阿XD

let svg = d3.select('body').append('svg')
.attr("width", 200)
.attr("height", 200);

繪製線段

svg.append("line")
.attr("x1", 5)
.attr("y1", 5)
.attr("x2", 50)
.attr("y2", 50)
.attr("stroke-width", 2)
.attr("stroke", "black");

//記得要給stroke-width寬度，不然根本看不到他www

繪製圓圈

svg.append('circle')
.attr("cx", 10)
.attr("cy", 10)
.attr("r", 5)
.style("fill", "black");

//cx, cy 代表圓心，r代表半徑

//style部分，fill 圓圈顏色，stroke-width 外框寬度 , stroke外框顏色

繪製矩形

svg.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("rx", 10)
.attr("ry", 10)
.attr("width", 50)
.attr("height", 100);

//rx, ry可以設定圓角

參考資料

https://www.dashingd3js.com/svg-basic-shapes-and-d3js