D3.js数据可视化实战手册

第7章 形状之美

本章涵盖以下内容：

◆ 创建简单形状

◆ 使用线条生成器

◆ 使用线条插值

◆ 更改线条的张力

◆ 使用区域生成器

◆ 使用区域插值

◆ 使用圆弧生成器

◆ 实现圆弧过渡

7.1 简介

SVG（可缩放矢量图形）是W3C（国际互联网标准组织）颁布的一种成熟标准，用于规范网络和移动平台上的交互式图形。如同HTML一样，SVG能够很好地与CSS、JavaScript等浏览器技术结合起来，成为众多网络应用的核心。在现今网络世界中，从数字地图到数据可视化，到处都可见SVG的身影。本书到目前为止的示例大部分基于纯粹的HTML，然而在实际项目中，SVG已成为数据可视化约定俗成的标准,同时，它也是使D3可以真正绽放光芒的技术。本章将涉及SVG的基本概念，以及如何使用D3生成SVG图形。事实上， SVG 的话题本身非常的丰富，也已经出现了许多专门介绍 SVG 的书籍。不过本章并不会覆盖SVG的所有方面，而是将着重讨论其中与D3和数据可视化技术相关的特性。

7.1.1 什么是SVG?

顾名思义，SVG和图形相关，它用可缩放的矢量来描述图形图像。SVG有以下两大优点。

7.1.2 矢量

SVG图像基于矢量而非像素。在基于像素点的方式下，图像由位图构成，位图以x和y为坐标系，并用色彩填充。而基于矢量的图像由一组几何形状组成，这些形状由简单且相对的关系式来描述，并以特定纹理填充。可以想象，后者更加自然地贴合了数据可视化的需求。相比像素填充的位图，使用SVG中的线、条形和圆形来可视化数据要简单得多。

7.1.3 可伸缩性

SVG的第二个显著特性即可伸缩性。SVG图形是一组由相对关系式描述的几何图形，这使得它在任意的尺寸和放大程度下，也不会丢失精度。然而对于基于位图的图像而言，当它被放大到一定程度时，会呈现像素化现象（pixelation），即每一个像素都变得单独可见。SVG图像则不会有这个问题，如下图所示。 ...