先貼個總的中文文檔燎猛，然后是坐標軸d3-axis文檔恋捆，安裝什么的就跳過了。
一重绷、簡介
d3的坐標軸由<path>沸停、<line>、<text>三種元素組成的昭卓。其中愤钾，坐標軸的直線是<path>瘟滨，刻度（tick）是<line>，刻度上的文字是<text>能颁。
下面是官方文檔給的一個典型的axis栗子（當然杂瘸，這只是在控制臺看到的dom結(jié)構(gòu)，真正畫起來還是很簡潔的）
<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)
// 設(shè)置y軸和x軸的范圍
let yScale = d3.scaleLinear().domain([0,3000]).range([0,750]),
xScale = d3.scaleLinear().range([0,680]).domain(['','']) ,
//設(shè)置x和y軸的刻度方向及刻度數(shù)
yaxis = d3.axisLeft().scale(yScale),
xaxis = d3.axisTop().scale(xScale);
// 設(shè)置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绒怨、設(shè)置x軸及y軸（線性、值域谦疾、像素范圍南蹂、刻度方向、刻度樣式及位置）念恍，畫
結(jié)果是一個倒L形的坐標軸六剥，如果想要通常的L形的坐標軸，可以將y軸的domain翻轉(zhuǎn)一下峰伙，再將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])表示刻度的數(shù)值范圍策彤。
2、range([0,750])表示像素范圍匣摘；我不想要默認范圍和刻度店诗，就傳了['','']。（不報錯音榜，應(yīng)該有更好的方案）
3庞瘸、表示刻度（tick）方向：axisTop、axisRight赠叼、axisBottom擦囊、axisLeft。
意思也很明顯嘴办，Top和Bottom是橫坐標的刻度在上還是在下霜第；Left和Right是縱坐標的刻度在左還是右。
4户辞、scale()：設(shè)置比例尺泌类，栗子里把yScale和xScale當做參數(shù)傳進去了
5、ticks()：設(shè)置刻度數(shù)，有默認值刃榨。
6弹砚、attr("transform", "translate(80,80)")：這兩句是決定x和y軸相對于左上角的點偏移量。
ps：d3的api太豐富了枢希，英文文檔啃的有點慢桌吃，有時候還得一個一個的試api，但是條條大路通羅馬苞轿，最終也是弄出來了一個想要的坐標軸茅诱。
