D3也可以使用Canvas绘图，不过对于SVG的支持更多。所以先从SVG开始。
1.SVG
1）预定义形状
| 形状 | 参数 | 示例 |
|---|---|---|
| 矩形 <rect> | <x=0, y=0,> width, height | <rect x="50" y="20" width="150" height="150"/> |
| 圆形 <circle> | <cx=0, cy=0,> r | <circle cx="100" cy="50" r="40"/> |
| 椭圆 <ellipse> | <cx=0, cy=0,> rx, ry | <ellipse cx="300" cy="80" rx="100" ry="50"/> |
| 线 <line> | x1, y1, x2, y2 | <line x1="0" y1="0" x2="200" y2="200"/> |
| 折线 <polyline> | points | <polyline points="200,10 250,190 160,210"> |
| 多边形 <polygon> | points, style="fill-rule=[nonzero | evenodd | inherit]" | <polygon points="200,10 250,190 160,210" fill-rule:nonzero;"/> |
| 路径 <path> | SVG 路径 - <path> | 创建一个二次方贝塞尔曲线 |
2）其它SVG元素：
| 标签 | 含义 |
|---|---|
| <g></g> | group，标记一组SVG元素 |
| <text></text> | 文本 |
3) 涂色：
描边：
| 属性名 | 说明 | 示例 |
|---|---|---|
| stroke | 描边颜色 | |
| stroke-width | 描边宽度 | |
| stroke-linecap | 画笔形状 [butt | round | square | inherit] square会比实际长度宽一点。 | stroke-linecap-MDN |
| stroke-dasharray | 创建虚线。提供一组数字，依次为线段和间距的长度。 | <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> |
| stroke-opacity | 描边透明度0-1 |
填充：
| 属性名 | 说明 | 示例 |
|---|---|---|
| fill | 填充颜色 | |
| fill-opacity | 填充透明度0-1 | <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> |
2.与D3联系一下：
还是举个例子：
比如要画一条x轴。
我们眼中的x轴是这样的：
看到的数轴.png
而D3画出来的x轴是这样的：
用字符表示的数轴.png
每个小刻度都是一个line元素加一个text元素构成的分组，用一整条path连接起来，这才构成完整的坐标轴分组。
