D3 4.x数据可视化实战手册（第2版）

第7章　形状之美

本章涵盖以下内容：

• 创建简单形状
• 使用线条生成器
• 使用曲线
• 更改线条的张力
• 使用区域生成器
• 使用断面曲线
• 使用圆弧生成器
• 实现圆弧过渡

7.1　简介

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

什么是SVG

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

矢量

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

可伸缩性

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