1奥洼、圓形
（cx，cy）圓心點(diǎn)坐標(biāo)晚胡，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估盘、文本
//? ? 代碼也跟之前一樣的結(jié)構(gòu)瓷患，用 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>
圖表庫(kù)：https://d3-graph-gallery.com/index.html
熱力圖：https://d3-graph-gallery.com/heatmap.html
圖表下載：https://github.com/holtzy/D3-graph-gallery
