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步:

  1. 在 svg 画布中插入相应的 svg 标签
  2. 设置相应的属性
// 矩形
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 学习资源或方法,也欢迎在评论中与我交流。以上!

4. 参考

留言列表
  • 1414:
    14
      2018年07月17日 11:11 回复
    • 32432:
      2342
        2018年06月11日 15:51 回复

      发表评论: