d3.js 使用坐标轴

本片blog记录d3坐标轴入门，使用版本v5.9.2SVG如何实现坐标轴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详解