8、D3.js 坐标轴使用全攻略

D3.js 坐标轴使用全攻略

1. 引言

D3 最初发布时没有内置对坐标轴组件的支持，但由于坐标轴是许多基于笛卡尔坐标系的可视化项目的通用构建块，D3 很快就引入了对坐标轴的内置支持，并且自发布以来一直在不断增强。接下来，我们将深入探讨 D3 坐标轴组件的使用以及一些相关技术。

2. 基本坐标轴操作

2.1 准备工作

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

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

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
    </butto