D3.js学习之SVG基础知识

马（云）老师说现在是DT时代，数据就是当代社会的“石油”。有了数据后，如何利用数据，挖掘出数据的价值才会让数据的价值真正体现出来。数据可视化在近年来也越来受到重视，而d3 .js作为当下最流行的可视化工具，值得大家花时间云学习和掌握。d3.js基于svg来绘制各种各样的报表，所以学习d3.js的第一步就是了解svg。本文整理记录我入门d3.js时了解的一些svg基础知识。

1. SVG 是什么

SVG 全称是可缩放矢量图（Scalable Vector Graphics）。这里有两个重点：可缩放、矢量图。

可缩放表明 SVG 放大缩小不会失真。

与矢量图对应的则是位图。平时我们用手机，相机拍摄的照片都是位图，在手机，电脑上看到的图片也是位图。总之，复杂的图像用位图，矢量图适合表现一些简单的图像。

1.1 SVG 的坐标系统与尺寸单位

SVG，HTML，canvas 的坐标系统都是相同的：左上角为原点（0,0），向右为 x 轴正方向，向下为 y 轴正方向。

svg坐标系统

用户单位和屏幕单位的映射关系被称为用户坐标系统。用户单位即 SVG 渲染图形时使用的单位，屏幕单位我们可以理解了像素（px），一般情况下，SVG中1个用户单位等同于1个屏幕单位：

<svg width="100" height="100">

上面的元素定义了一个100*100px的SVG画布，这里1用户单位等同于1屏幕单位。

但这种映射关系可以通过viewBox属性改变

<svg width="200" height="200" viewBox="0 0 100 100">

这里定义的画布尺寸是200200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0) 点开始，100宽100高的区域。这个100 x 100的区域，会放到200 x 200的画布上显示。于是就形成了放大两倍的效果。关于 viewBox 更详情的解释可以参看理解SVG viewport,viewBox, preserveAspectRatio缩放

1.2 如何在 HTML 中使用 SVG

可以通过以下方式在 HTML 中使用 SVG：

<!--在 img 标签中使用 svg -->
<img src="demo.svg" style="display: inline-block; width: 500px; height: 500px;">

<!--把 svg 作为背景图片使用 -->
<div style="display: inline-block; width: 500px; height: 500px; background-image: url(demo.svg)"></div>

<!--在 object 标签中使用 svg -->
<object type="image/svg+xml" data="demo.svg" class="example"></object>

<!--直接使用 svg 标签 -->
<svg class="svg" width="500" height="500"></svg>

<!--在iframe中使用svg-->
<iframe src="./world-population.svg" frameborder="0" width="500" height="500"></iframe>

另外，SVG 也可以转换成 base64 内联进 Data URI中。

1.3 SVG 中的颜色

假如要定义红色，可以使用下面的任一方式：

'red'
'#f00'
'#ff0000'
rgb(155,0,0)
rgb(100%,0%,0%)

1.3 SVG 的优缺点

优点：主流浏览器都支持；实现了 DOM 接口，可以通过 JS，CSS 操作 SVG。
缺点：图像表现能力有限，不适合表现复杂图像。

2. SVG 标签元素

以下是 SVG 常用标签元素，这些元素都可以直接打印到 canvas 中。

text：文本
line：线段
rect：矩形
circle：圆形
ellipse：椭圆
polyline：折线
polygon：多边形
path：路径
image：插入图片
use：复制一个形状

另外，还可以使用 g 标签对元素进行分组。下图是这些 svg 标签和相应的属性解释：

svg常用标签

3. 使用 D3.js 操作svg标签元素

使用 d3.js 基于 SVG 标签去绘制图像，总结起来就就2步:

在 svg 画布中插入相应的 svg 标签

设置相应的属性

// 矩形
d3.select('.rect')
    .append('rect')  
    .attr('x', 10)
    .attr('y', 10)
    .attr('width', 100)
    .attr('height', 50)
    .attr('fill', 'none')
    .attr('stroke', 'red')
    .attr('stroke-width', 1);

// 椭圆
d3.select('.ellipse')
    .append('ellipse')
    .attr('cx', 80)
    .attr('cy', 80)
    .attr('rx', 40)
    .attr('ry', 60)
    .attr('fill', 'none')
    .attr('stroke', 'red')
    .attr('stroke-width', 1);

// 折线
d3.select('.polyline')
    .append('polyline')
    .attr('points', '60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145')
    .attr('fill', 'none')
    .attr('stroke', 'red')
    .attr('stroke-width', 1);

这些代码涉及到了d3的选择器，svg操作基础，当然这并不能体现 D3.js 的强大可视化展示能力，但基本思路是这样。后续我会陆续发布一些 d3.js 相关的学习笔记，希望对大家有些许帮助；如果你有好的 d3.js 学习资源或方法，也欢迎在评论中与我交流。以上！