d3.js数据可视化从入门到放不下（三）—— 构建平面直角坐标系

首先，读到这儿，已经基本知道了d3的基本语法和套路。

在此之前的示例都是使用纯粹的HTML，由本文开始，正式引入SVG的概念，以后的所有示例均使用SVG模式。

SVG（Scalable Vector Graphics），即可缩放矢量图形。是W3C颁布的一种成熟标准，用用于规范网络和移动平台上的交互式图形。关于SVG的东西就不展开说了，毕竟光这个东西都可以写本书了，这里主要说一下它与D3数据可视化相关的一些特性：

1. 可伸缩性好：因为它是矢量的，SVG图像能够在被任意放大的情况下质量不被降低，可伸缩性高；
2. 高质量：SVG图像在任何分辨率的设备下都能保证高质量输出；
3. 可读性高：SVG文件是基于XML的，可读性高；
4. 易用：SVG可以很好的与JavsScript/CSS结合操作；
5. 尺寸小：SVG与JPEG/PNG图像相比，尺寸更小，文件的可压缩性更高；
6. 应用广泛：所有的现代浏览器以及移动平台都支持SVG标准；
7. 开放标准：SVG有W3C组织创建，而且他不是一个专属商业标准。

举个栗子，以第一点为例。下图是SVG和位图像素化对比，由于SVG图形是一组由相对关系式描述的几何图形，这使得它在任意尺寸下都不会丢失精度。

话说回来，干正事儿~

最开始，在d3.js中是没有坐标的概念的。但后来因为这个东西实在是太常用了，d3.js发布之后也在不断的完善中，所以很快就加入了坐标轴的概念，也就是本文要讲的Axis组件。

创建基础组件：

首先，声明基础变量：

let height = 500,
  width = 500,
  margin = 25,
  axisWidth = width - 2 * margin;

然后，创建svg实例，并设置一些基础属性：

let svg = d3
  .select("body")
  .append("svg")
  .attr("class", "axis")
  .attr("width", width)
  .attr("height", height);

创建Axis组件

创建一个线性尺度，并设置其定义域和值域，线性尺度这个概念简单的说就是定义了数据元素和图形元素之间的映射关系。啊~很难用文字表达，看代码体会吧。。。

let scale = d3