三、 刻度尺 axis

座標軸常用方法

方法	格式	說明
axisTop	d3.axisTop()	生成刻度值在上方的刻度尺
axisBottom	d3.axisBottom()	生成刻度值在底部的刻度尺
axisLeft	d3.axisLeft()	生成刻度值在左側的刻度尺
axisRight	d3.axisRight()	生成刻度值在右側的刻度尺
scale	d3.axisTop().scale(scaleLinear)	按比例尺生成刻度尺
ticks	ticks(num)	將刻度尺分成num分，但不一定是num分
tickValues	tickValues[0,1,3,5]	刻度只顯示值在這個數組中的值
tickFormat	tickFormat(fn)	格式化刻度值顯示內容，類似echarts的format
tickSize	tickSize(num)	刻度線的大小
tickSizeInner	tickSizeInner(num)	中間部分刻度線大小
tickSizeOuter	tickSizeOuter(num)	邊上兩個刻度線大小
tickPadding	tickPadding(num)	刻度值和刻度線的間隔
tickArguments	。。。	暫時貌似沒什麼用

 

下面來一個簡單的例子

let scaleLinear = d3.scaleLinear()
  .domain([0,5])
  .range([0,400]);
var axisL = d3.axisLeft().scale(scaleLinear).tickPadding(15);
var axisT = d3.axisTop().scale(scaleLinear).tickFormat(function (a,b,c) {
  return a + '元'
});
var axisB = d3.axisBottom().scale(scaleLinear).tickValues([0,2,3]);
var axisR = d3.axisRight().scale(scaleLinear).tickSizeOuter(5);

let body = d3.select('body')
  .append('svg')
  .attr('width',800)
  .attr('height',500);

body.append('g')
  .attr('transform','translate(50,50)')
  .call(axisL);
body.append('g')
  .attr('transform','translate(450,50)')
  .call(axisR);
body.append('g')
  .attr('transform','translate(50,50)')
  .call(axisT);
body.append('g')
  .attr('transform','translate(50,450)')
  .call(axisB)

刻度尺生成時都是位於原點的，具體位置要計算得出後使用tranform移動到具體位置上