D3 v5 学习笔记-2 SVG

D3也可以使用Canvas绘图，不过对于SVG的支持更多。所以先从SVG开始。

1.SVG

SVG教程-MDN

1）预定义形状

形状	参数	示例
矩形	width, height
圆形	r
椭圆	rx, ry
线	x1, y1, x2, y2
折线	points
多边形	points, style="fill-rule=[nonzero | evenodd | inherit]"
路径	SVG 路径 -	创建一个二次方贝塞尔曲线

2）其它SVG元素：

标签	含义
	group，标记一组SVG元素
	文本

3) 涂色：

填充和边框-MDN

描边：

属性名	说明	示例
stroke	描边颜色
stroke-width	描边宽度
stroke-linecap	画笔形状 [butt | round | square | inherit] square会比实际长度宽一点。	stroke-linecap-MDN
stroke-dasharray	创建虚线。提供一组数字，依次为线段和间距的长度。
stroke-opacity	描边透明度0-1

填充：

属性名	说明	示例
fill	填充颜色
fill-opacity	填充透明度0-1

2.与D3联系一下：

还是举个例子：
比如要画一条x轴。
我们眼中的x轴是这样的：

看到的数轴.png

而D3画出来的x轴是这样的：

用字符表示的数轴.png

每个小刻度都是一个line元素加一个text元素构成的分组，用一整条path连接起来，这才构成完整的坐标轴分组。