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

第5章 玩转坐标轴

本章包括如下内容：

◆ 坐标轴基础

◆ 自定义刻度

◆ 绘制表格线

◆ 动态调节坐标轴尺度

5.1 简介

在刚开始的时候，D3本身并没有内建的Axis组件。这情形并没有持续太长时间，因为在很多基于笛卡尔坐标系统的可视化项目中，坐标轴是通用的构建模块，因此 D3 亟需提供内建的坐标轴。所幸 D3 很快就引入了坐标轴的概念，并且在发布之后不断地改进。这一章中，我们将探讨一下Axis组件的使用和一些相关的技术。

5.2 坐标轴基础

这一节中，我们会集中介绍Axis组件的基本概念、D3对其的支持，还有Axis不同的类型和特性，当然还有SVG结构。

5.2.1 准备阶段

打开如下文件的本地副本。

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

5.2.2 开始编程

先看一段代码示例。

<div class="control-group">

<button onclick="renderAll('bottom')">

horizontal bottom

</button>

<button onclick="renderAll('top')">

horizontal top

</button>

<button onclick="renderAll('left')">

vertical left

</button>

<button onclick="renderAll('right')">

vertical right

</button>

</div>

<script type="text/javascript">

var height=500,

width=500, ...