d3（一）---画坐标轴

先贴个总的中文文档，然后是坐标轴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，但是条条大路通罗马，最终也是弄出来了一个想要的坐标轴。