本片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详解