共计 1335 个字符，预计需要花费 4 分钟才能阅读完成。
本片 blog 记录 d3 坐标轴入门，使用版本 v5.9.2
SVG 如何实现坐标轴
d3 生成的坐标图是通过 svg 的 path(路径) 元素 + g + line + text 元素组成的，如下图
path 表示的是底部坐标轴（不包括内部刻度），如下
这部分通过 d 描绘，在 d3 中称为 outer tick g 容器则包括了 text 和 line 作为 inner tick
line 即线，text 即文字
d3 实现坐标轴主要步骤
步骤主要如下：
创建 scale（比例尺）
创建 axis（坐标轴，是个函数）
selection.call(axis) 创建坐标轴
小实验
数据与宽高
const data = [1, 10, 20];
let svgWidth = 400,
svgHeight = 400;
小实验都用这些数据啦
最简单的坐标轴
/**
* 创建 scale
*/
let scale = d3.scaleLinear()
.domain([0, d3.max(data)]) // 值域
.range([0, 200]); // 可视范围
/**
* 创建 axis
*/
let axis = d3.axisTop(scale); // 创建坐标轴，除此之外还有 axisLeft，axisBottom，axisRight，区别在于 tick（刻度）的位置
/**
* 插入
*/
d3.select(‘body’)
.append(‘svg’)
.attr(‘width’, svgWidth)
.attr(‘height’, svgHeight)
.append(‘g’)// 需要放在 g 容器里
.attr(‘transform’, ‘translate(10,20)’)
.call(axis);// 创建坐标轴
坐标轴的长度来源于比例尺的 range 最大值来源于 d3.max(data) 200(range) / 20(最大值) = 10 段 20(最大值）/ 10 段 = 2 所以坐标轴如是显示
仅显示所需的刻度的坐标轴
上一个坐标轴显示了平均的刻度，但是有时这不是我们想要的，我们可以使用 axis.tickValues() 显示需要的刻度 仅需在 axis 后增加 api 即可
let axis = d3.axisTop(scale).tickValues(data);
设置刻度长短
也是使用 axis.tickSize() 即可，为方便观察，这里使用 axisBottom 坐标轴
let axis = d3.axisBottom(scale).tickValues(data).tickSize(200);
设置样式
其实设置样式就是对其中的 svg 设置，原理类似 dom 操作，选择 svg 元素，改变样式
举个简单的例子
d3.select(‘body’)
.append(‘svg’)
.attr(‘width’, svgWidth)
.attr(‘height’, svgHeight)
.append(‘g’)
.attr(‘transform’, ‘translate(10, 20)’)
.call(axis)
.selectAll(‘path’).attr(‘stroke’, ‘pink’).attr(‘stroke-width’, ‘5’);
最后对 g 中的 path 进行赋样式
总结
组合好不同的 API 会有更多效果！
参考资料
d3.js 直方图与坐标轴基础 d3.js API selection.call() d3 中的 axis.ticks 详解