D3学习系列4
本篇讨论D3绘制基本图形。
线条的绘制
直线
在svg中绘制一条直线，只需要指定该之间的开始坐标和结束坐标即可，如：
<line x1="0" y1="0" x2="300" y2="300"/>
直线可以指定的表现属性包括：
stroke：指定线条颜色
stroke-width:指定线条宽度
如下直线绘制代码：
svg.append("line").attr("x1",10).attr("y1",10).attr("x2",40).attr("y2",90).attr("stroke","green").attr("stroke-width",1);
svg.append("line").attr("x1",90).attr("y1",10).attr("x2",40).attr("y2",90).attr("stroke","green").attr("stroke-width",2);
svg.append("line").attr("x1",180).attr("y1",10).attr("x2",40).attr("y2",90).attr("stroke","green").attr("stroke-width",3);
svg.append("line").attr("x1",300).attr("y1",10).attr("x2",40).attr("y2",90).attr("stroke","green").attr("stroke-width",4);
svg.append("line").attr("x1",400).attr("y1",10).attr("x2",40).attr("y2",90).attr("stroke","green").attr("stroke-width",5);
可以产生如下直线：
基本形状的绘制
圆，在svg中绘制圆形需要圆心坐标和半径长度，如：
<circle cx="60" cy="50" r="50" fill="red" stroke="blue" stroke-width="10" />
椭圆，在svg中绘制需要指定 椭圆的圆心、x轴半径和y轴半径的长度，如：
<ellipse cx="200" cy="50" rx="80" ry="40" fill="yellow" stroke="blue" stroke-width="5" />
矩形，在svg绘制中需要指定矩形左上角的坐标位置、矩形的长、宽，和矩形角如果为圆角时的半径（非必须参数），如：
<rect x="300" y="20" width="80" height="60" fill="yellow" stroke="navy" stroke-width="10" />
<rect x="400" y="20" width="80" height="60" rx=“5” ry=“5” fill="yellow" stroke="navy" stroke-width="5" />
多边形，在svg中绘制其他多边形，可以通过制定一个序列点来完成，svg会按照点的顺序进行绘制，最后把绘制曲线首尾连接，形成封闭图形，如：
<polygon fill="red" stroke="blue" stroke-width="10"
points="350,75 379,61 469,61 397,15 423,30
350,50 277,77 303,15 231,61 321,61" />
基本形状都可以设置如下属性：
fill：形状的填充颜色
stroke：绘制形状的线条颜色
stroke-width：绘制形状的线条的宽度
如下代码：
svg.append("circle").attr("cx",60).attr("cy",50).attr("r",40).attr("fill","red").attr("stroke","blue").attr("stroke-width",10);
svg.append("ellipse").attr("cx",200).attr("cy",50).attr("rx",80).attr("ry",40).attr("fill","yellow").attr("stroke","green").attr("stroke-width",5);
svg.append("rect").attr("x",300).attr("y",20).attr("width",80).attr("height",60).attr("fill","yellow").attr("stroke","green").attr("stroke-width",10);
svg.append("rect").attr("x",400).attr("y",20).attr("width",80).attr("height",60).attr("rx",5).attr("ry",5).attr("fill","yellow").attr("stroke","green").attr("stroke-width",5);
svg.append("polygon").attr("points","350,75 379,61 469,61 397,15 423,30 350,50 277,77 303,15 231,61 321,61").attr("fill","red").attr("stroke","blue").attr("stroke-width",10);
可以产生如下形状：
其他形状绘制
在svg中绘制其他类型的曲线，需要使用path元素.path采用命令的方式进行绘制，命令如下：
| 命令 | 名称 | 参数 | 解释 |
|---|---|---|---|
| M (absolute) | Move to | (x y)+ | 从给定的点开始绘制path，如果M(m)后跟着多个坐标位置，则暗含着这些坐标为lineto命令 |
| m (relative) | Move to | (x y)+ | |
| Z(z) | closepath | (none) | 用来表示结束path的绘制，结束为止和开始位置相连 |
| L(l) | line to | (x y)+ | 从当前位置绘制直线到给定的坐标位置 |
| H(h) | horizontal line to | x+ | 从当前位置绘制水平直线，长度为x |
| V(v) | vertical line to | y+ | 从当前位置绘制垂直直线，长度为y |
| C(c) | curve to | (x1 y1 x2 y2 x y)+ | 从当前位置绘制三次贝塞尔曲线到（x y）点，使用(x1 y1),(x2 y2)作为曲线的控制点 |
| S(s) | shorthand/smooth curve to | (x2 y2 x y)+ | |
| Q(q) | quadratic Bezier curve to | (x1 y1 x y)+ | 从当前位置绘制二次贝塞尔曲线到（x y）位置，使用(x1 y1)作为控制点 |
| T(t) | shorthand/smooth quadratic bezier curve to | (x y)+ | |
| A(a) | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ | 从当前点绘制椭圆弧到（x y）点，(rx ry)指定了绘制椭圆弧的轴长，x-axis-rotation 指定了椭圆弧相对当前坐标系统的旋转，椭圆弧所在椭圆的圆心自动计算得到。 |
<path d="M0,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5" />
如下绘制代码：
svg.append("path").attr("d","M0,350 l 50,-25 a25,25 -30 0,1 50,-25 l 50,-25 a25,50 -30 0,1 50,-25 l 50,-25 a25,75 -30 0,1 50,-25 l 50,-25 a25,100 -30 0,1 50,-25 50,-25").attr("fill","none").attr("stroke","red").attr("stroke-width",5);
可以产生如下形状：