先贴个总的中文文档，然后是坐标轴d3-axis文档，安装什么的就跳过了。
一、简介
d3的坐标轴由<path>、<line>、<text>三种元素组成的。其中，坐标轴的直线是<path>，刻度（tick）是<line>，刻度上的文字是<text>。
下面是官方文档给的一个典型的axis栗子（当然，这只是在控制台看到的dom结构，真正画起来还是很简洁的）
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
<path class="domain" stroke="currentColor" d="M0.5,6V0.5H880.5V6"></path>
<g class="tick" opacity="1" transform="translate(0.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.0</text>
</g>
<g class="tick" opacity="1" transform="translate(176.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.2</text>
</g>
<g class="tick" opacity="1" transform="translate(352.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.4</text>
</g>
<g class="tick" opacity="1" transform="translate(528.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.6</text>
</g>
<g class="tick" opacity="1" transform="translate(704.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">0.8</text>
</g>
<g class="tick" opacity="1" transform="translate(880.5,0)">
<line stroke="currentColor" y2="6"></line>
<text fill="currentColor" y="9" dy="0.71em">1.0</text>
</g>
</g>
二、栗子
// 取class为container的dom，插入宽高分别为880px和850px的svg
this.svg = d3.selectAll(".container").append('svg').attr("width",880).attr("height", 850)
// 设置y轴和x轴的范围
let yScale = d3.scaleLinear().domain([0,3000]).range([0,750]),
xScale = d3.scaleLinear().range([0,680]).domain(['','']) ,
//设置x和y轴的刻度方向及刻度数
yaxis = d3.axisLeft().scale(yScale),
xaxis = d3.axisTop().scale(xScale);
// 设置x和y轴的刻度的样式，并画上去（和最后两行注释掉的等价）
gAxis = this.svg.append("g").attr("font-size","20").attr("transform", "translate(80,80)").call(yaxis),
xAxis = this.svg.append("g").attr("font-size","20").attr("transform", "translate(80,80)").call(xaxis);
// yaxis(this.svg.append("g").attr("font-size","20").attr("transform", "translate(80,80)"))
// xaxis(this.svg.append("g").attr("font-size","20").attr("transform", "translate(80,80)"))
步骤很简单：
1、取个dom画个大svg（个人理解为「画布」）
2、设置x轴及y轴（线性、值域、像素范围、刻度方向、刻度样式及位置），画
结果是一个倒L形的坐标轴，如果想要通常的L形的坐标轴，可以将y轴的domain翻转一下，再将x轴平移一下，如下栗：
this.svg = d3.selectAll(".container").append('svg').attr("width",880).attr("height", 850)
let yScale = d3.scaleLinear().domain([0,3000]).range([750,0]),
xScale = d3.scaleLinear().range([0,680]).domain(['','']) ,
yaxis = d3.axisLeft().scale(yScale),
xaxis = d3.axisBottom().scale(xScale),
gAxis = this.svg.append("g").attr("font-size","20").attr("transform", "translate(80,40)").call(yaxis),
xAxis = this.svg.append("g").attr("font-size","20").attr("transform", "translate(80,790)").call(xaxis);
三、api解释
1、domain([0,3000])表示刻度的数值范围。
2、range([0,750])表示像素范围；我不想要默认范围和刻度，就传了['','']。（不报错，应该有更好的方案）
3、表示刻度（tick）方向：axisTop、axisRight、axisBottom、axisLeft。
意思也很明显，Top和Bottom是横坐标的刻度在上还是在下；Left和Right是纵坐标的刻度在左还是右。
4、scale()：设置比例尺，栗子里把yScale和xScale当做参数传进去了
5、ticks()：设置刻度数，有默认值。
6、attr("transform", "translate(80,80)")：这两句是决定x和y轴相对于左上角的点偏移量。
ps：d3的api太丰富了，英文文档啃的有点慢，有时候还得一个一个的试api，但是条条大路通罗马，最终也是弄出来了一个想要的坐标轴。
