D3.js Axes API 完整参考

简介

D3.js 是一个流行的 JavaScript 可视化库，它提供了很多强大的工具和 API 来创建交互式数据可视化。

Axes API 是 D3.js 的一个子集，它提供了用于创建坐标轴和网格线的函数和工具。

本文将介绍 Axes API 的完整参考指南，包括如何创建轴和网格线、如何自定义其外观等。

创建轴

创建轴的函数是 d3.axis()。它可以接受一个比例尺（scale）作为参数，该比例尺将决定轴的刻度和标签的位置。

创建线性轴

下面的代码创建了一个线性轴，使用的比例尺是 D3.js 中的线性比例尺（d3.scaleLinear()）。

// 创建线性比例尺
var scale = d3.scaleLinear()
             .domain([0, 100])
             .range([0, 500]);

// 创建轴
var axis = d3.axisBottom(scale);

// 将轴渲染到页面
d3.select('#axis')
  .call(axis);

上面的代码创建了一个水平的 x 轴，轴线和刻度标签放置在下方。调用 axisBottom() 可以将轴放置在底部。

类似地，调用 axisTop() 可以将轴放置在顶部。axisLeft() 和 axisRight() 可以创建垂直的 y 轴。

创建时间轴

下面的代码创建了一个时间轴，使用的比例尺是 D3.js 中的时间比例尺（d3.scaleTime()）。

// 创建数据
var data = [
  {date: '2019-01-01', value: 10},
  {date: '2019-01-02', value: 20},
  {date: '2019-01-03', value: 30},
  {date: '2019-01-04', value: 40},
  {date: '2019-01-05', value: 50}
];

// 创建时间比例尺
var scale = d3.scaleTime()
             .domain([
               d3.min(data, function(d) { return new Date(d.date); }),
               d3.max(data, function(d) { return new Date(d.date); })
             ])
             .range([0, 500]);

// 创建轴
var axis = d3.axisBottom(scale);

// 将轴渲染到页面
d3.select('#axis')
  .call(axis);

上面的代码创建了一个时间轴，它的刻度标签将自动解析日期格式并进行格式化。D3.js 内置了很多日期格式化函数，也可以使用自定义的格式化函数。

创建分类轴

下面的代码创建了一个分类轴，用于显示一组分类数据。

// 创建数据
var data = ['A', 'B', 'C', 'D', 'E'];

// 创建比例尺
var scale = d3.scaleBand()
             .domain(data)
             .range([0, 500])
             .padding(0.2);

// 创建轴
var axis = d3.axisBottom(scale);

// 将轴渲染到页面
d3.select('#axis')
  .call(axis);

上面的代码创建了一个分类轴，横轴上的标签将按照数据中的顺序排列。

自定义轴

可以使用一系列的 API 来自定义轴的外观和行为。

设置轴的刻度数量

轴的刻度数量由 ticks() 函数控制。该函数可以传递一个整数值，D3.js 将尝试在数据范围内均匀分布指定数量的刻度。

var axis = d3.axisBottom(scale)
            .ticks(5); // 设置刻度数量

设置轴的标签格式

轴的标签格式可以通过使用 tickFormat() 函数来自定义。

// 创建轴
var axis = d3.axisBottom(scale)
            .tickFormat(function(d) {
              return '$' + d; // 添加美元符号
            });

在上面的代码中，标签文本将以美元符号开头。

设置轴的刻度颜色

可以使用 tickFormat() 函数设置刻度标签的颜色。

// 创建轴
var axis = d3.axisBottom(scale)
            .tickFormat(function(d) {
              return '$' + d; // 添加美元符号
            })
            .tickSize(10)
            .tickPadding(5)
            .tickColor('green'); // 设置刻度颜色

翻转轴的方向

可以使用 orient() 函数翻转轴的方向。该函数接受一个 'top'、'bottom'、'left' 或 'right' 参数。

// 创建轴
var axis = d3.axisLeft(scale)
            .orient('right'); // 翻转轴的方向为 right

// 将轴渲染到页面
d3.select('#axis')
  .call(axis);

隐藏轴线

可以使用 tickSizeOuter() 函数隐藏轴线。它可以接受一个数字或一个数组参数来指定内部和外部刻度的长度。

// 创建轴
var axis = d3.axisBottom(scale)
            .tickSizeOuter(0); // 隐藏轴线

// 将轴渲染到页面
d3.select('#axis')
  .call(axis);

自定义刻度标签

可以使用 tickValues() 函数来自定义刻度标签。它可以接受一个数组参数，指定要显示的标签值所在的位置。

// 创建轴
var axis = d3.axisBottom(scale)
            .tickValues([20, 50, 80]); // 只显示指定的标签

// 将轴渲染到页面
d3.select('#axis')
  .call(axis);

调整刻度之间的间距

可以使用 paddingInner() 和 paddingOuter() 函数来调整刻度之间的间距。它们的取值范围为 [0, 1]，表示距离比例。

// 创建轴
var axis = d3.axisBottom(scale)
            .paddingInner(0.3) // 设置刻度之间的间距
            .paddingOuter(0.2);

// 将轴渲染到页面
d3.select('#axis')
  .call(axis);

创建网格线

网格线可以通过轴的 tickSize() 函数来创建。它可以接受两个数值参数，用于设置内部和外部网格线的长度。

// 创建轴
var axis = d3.axisBottom(scale)
            .tickSize(10) // 设置网格线长度
            .tickSizeOuter(0); // 隐藏轴线

// 创建网格线
var gridlines = d3.axisBottom(scale)
                .tickSize(-500) // 逆向的负数表示网格线向内延伸
                .tickFormat('');

// 将网格线渲染到页面
d3.select('#gridlines')
  .call(gridlines);

在上面的代码中，将轴的外部长度设置为 0，以便隐藏轴线。并使用负数的网格线长度将网格线向轴线内延伸。