D3 v5 学习笔记-2 SVG

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

1.SVG

SVG教程-MDN

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) 涂色：

填充和边框-MDN

描边：

属性名	说明	示例
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连接起来，这才构成完整的坐标轴分组。