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

第5章　玩转坐标轴

本章涵盖以下内容：

• 坐标轴基础
• 自定义刻度
• 绘制表格线
• 动态调节坐标轴尺度

5.1　简介

在刚开始的时候，D3本身并没有内建的Axis组件。这种情形并没有持续太长时间，因为在很多基于笛卡儿坐标系统的可视化项目中，坐标轴是通用的构建模块，而最乏味的工作之一就是从头开始构建坐标，因此D3亟须提供内建的坐标轴。所幸，D3很快就意识到这个问题并提供了坐标轴的支持，并且在发布之后不断地改进。

在本章中，我们将探索Axis组件的使用方法和一些相关的技术。

5.2　坐标轴基础

在本例中，我们将集中介绍Axis组件的基本概念、D3提供的相应支持以及Axis不同的类型和特性，当然还有其SVG结构。

5.2.1　准备工作

在浏览器中打开如下文件的本地副本：

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter5/  
basic-axes.html。

5.2.2　开始编程

下面，先看一段示例代码。

<div class="control-group"> 　　<button onclick="renderAll(d3.axisBottom)"> 　　　　horizontal bottom 　　</button> 　　<button onclick="renderAll(d3.axisTop)"> 　　　　horizontal top 　　</button> 　　<button onclick="renderAll(d3.axisLeft)"> 　　　　vertical left 　　</button> 　　<button onclick="renderAll(d3.axisRight)"> 　　　　vertical ...