1、圆形
（cx，cy）圆心点坐标，r：半径
<svg>
<circle style="fill: #69b3a2" stroke="black" cx=100 cy=100 r=40></circle>
</svg>
// 代码画圆----粉色的圆形
<div style="background-color: #fff;" id="circle"></div>
// create svg element:
var svg = d3.select("#circle").append("svg").attr("width", 200).attr("height", 200)
// Add the path using this helper function
svg.append('circle')
.attr('cx', 100)
.attr('cy', 100)
.attr('r', 50)
.attr('stroke', 'black')
.attr('fill', 'pink');
2、方形
<rect style="fill: #69b3a2" stroke="black" x=20 y=40, width=300 height=40></rect>
// create svg element:
var svg = d3.select("#rect").append("svg").attr("width", 800).attr("height", 200)
// Add the path using this helper function
svg.append('rect')
.attr('x', 10)
.attr('y', 60)
.attr('width', 600)
.attr('height', 40)
.attr('stroke', 'black')
.attr('fill', 'pink');
<svg width = "300" height = "300">
<g transform = "translate(60,60) rotate(45)">
<rect x = "20"
y = "20"
width = "60"
height = "60"
fill = "green"
>
</rect>
</g>
</svg>
// translate
var group = d3.select("#svgcontainer g")
.attr("transform", "translate(60, 60) rotate(30)");
3、画线
<line stroke="red" x0=10 y0=10, x1=500 y1=100></line>
4、文本
// 代码也跟之前一样的结构，用 attr方法赋值： attr(属性名, 属性值)
<text stroke="green" style="font-size: 19px" x=100 y=50>I'm a piece of text</text>
5、路径(折线和曲线)
<path style="fill: none" stroke="black" d="M0 20 L150 150 L300 100 L450 20 L600 130"></path>
var lineFunc = d3.line()
.curve(d3.curveBasis) // 上面图片的代码只加此行，直线路径变曲线
.x(function(d) { return d.x })
.y(function(d) { return d.y })
6、面积图
<path style="fill: cyan" stroke="black" d="M0 200 L0 20 L150 150 L300 100 L450 20 L600 130 L600 200"></path>
7、弧形
<path
style="fill: #69b3a2"
stroke="black"
transform="translate(400,200)"
d="M0,149 A150,150,0,0,1,-0.47,-149.9 L-0.3,-99.9 A100,100,0,0,0,0.15,99.9Z">
</path>
图表库：https://d3-graph-gallery.com/index.html
热力图：https://d3-graph-gallery.com/heatmap.html
图表下载：https://github.com/holtzy/D3-graph-gallery
