d3.js 使用坐标轴

本片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实现坐标轴主要步骤

步骤主要如下：

1. 创建scale（比例尺）
2. 创建axis（坐标轴，是个函数）
3. 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详解