马(云)老师说现在是DT时代,数据就是当代社会的“石油”。有了数据后,如何利用数据,挖掘出数据的价值才会让数据的价值真正体现出来。数据可视化在近年来也越来受到重视,而d3 .js作为当下最流行的可视化工具,值得大家花时间云学习和掌握。d3.js基于svg来绘制各种各样的报表,所以学习d3.js的第一步就是了解svg。本文整理记录我入门d3.js时了解的一些svg基础知识。
SVG 全称是可缩放矢量图(Scalable Vector Graphics)。这里有两个重点:可缩放、矢量图。
可缩放表明 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缩放
可以通过以下方式在 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中。
假如要定义红色,可以使用下面的任一方式:
以下是 SVG 常用标签元素,这些元素都可以直接打印到 canvas 中。
另外,还可以使用 g 标签对元素进行分组。下图是这些 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 学习资源或方法,也欢迎在评论中与我交流。以上!
发表评论: