D3学习一（精通D3j.js 交互式数据可视化高级编程）

一、SVG

SVG预定了其中形状元素，分别为矩形：<rect>；圆形：<circle>;椭圆：<ellipse>;线段：<line>;折线<polyline>;多边形：<polygon>;路径<path>

1，矩形

矩形的参数共有6个

• x:矩形左上角x坐标
• y:矩形左上角y坐标
• width:矩形的宽度
• height:矩形的高度
• rx:对于圆角矩形，指定椭圆在x方向的半径
• ry:对于圆角矩形，指定椭圆在y方向的半径

<rect x="20" y=" 20" width 200 h.ight "100" 
style=" fill :stee1b1ue ; stroke:b1ue; stroke- width : 4; opacity : 0 . 5 " />

<rect x=" 250" y=" 20 " rx="20 " ry=" 30 " width=" 200" heiqht=" 100 "
sty1e- " fi11 : ye11ow; stroke :black; stroke-width : 4 ; opacity : O. 5 " /> 

2，圆形和椭圆

圆形的参数是3个

• cx:圆心的x坐标
• cy:圆心的y坐标
• r:圆的半径

椭圆的参数和圆形类似，只是半径分为水平半径和垂直半径

• cx:圆心的x坐标
• cy:圆心的y坐标
• rx:椭圆的水平半径
• ry:椭圆的垂直半径

3,线段

线段的参数是起点和终点的坐标

• x1:起点的x坐标
• y1:起点的y坐标
• x2:终点的x坐标
• y2:终点的y坐标

4，多边形和折线

多边形和折线的参数是一样的，都只有一个points参数，这个参数的值是一系列的点坐标，不同之处是多边形会将重点和起点连接起来，而折线不链接

5，路径

<path>标签的功能最丰富，前面列举的图形都能够用路径制作出来，与折线类似，也是通过给出一系列点坐标来绘制。在D3中绘制地图时，会经常用到此标签。其用法是：给出一个坐标点，坐标点前面添加一个英文字母，表示是如何运动到此坐标点的。英文字母按照功能可分为五类。

• M=moveto：将画笔移动到指定坐标
• L=lineto：画直线到指定坐标
• H=horizontal lineto:画水平直线到指定坐标
• V=vertical lineto:画垂直直线到指定坐标
• C=curveto：画三次贝塞尔曲线经两个指定控制点到达终点坐标
• S=shorthand/smooth curveto:与前一条三次贝塞尔曲线相连，第一个控制点为前一条曲线第二个控制点的对称点，只需输入第二个控制点和终点，即可绘制一个三次贝塞尔曲线
• Q=quadratic Bezier curveto：画二次被三儿曲线经过一个指定控制点到达最终点坐标
• T=Shorthand/smooth quadratic Bezier curveto:与前一条二次贝塞尔曲线相连，控制点为前一条二次贝塞尔曲线控制点的对称点，只需输入终点，即可绘制一个二次贝塞尔曲线
• A=elliptical arc:画椭圆曲线到指定坐标
• Z=closepath:绘制一条直线连接终点和起点，用来封闭图形