- 首页
- 关于
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 渲染图形时使用的单位，屏幕单位我们可以理解了像素（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 标签和相应的属性解释：
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 学习资源或方法，也欢迎在评论中与我交流。以上！
发表评论：