如何用D3繪製各類樣式的x座標軸

該文只使用d3.jsV4版本進行繪製，不關注V3版本，咱們要與時俱進。

在繪製圖表的過程當中，直座標系是繞不開的一個問題，直方圖，折線圖，散點圖等等都須要使用到直座標系。而其中最關鍵的是x軸的繪製，由於y軸基本上都是數值顯示。如何用代碼實現，x軸的表現形式是什麼，這是本文主要討論的問題。

1 連續性x座標軸

1.1 從零開始的連續性x座標軸

什麼是從零開始，就是從繪製的座標軸的最左端開始顯示第一個刻度。折線圖，散點圖常常採用這種樣式的x座標軸。

let height = 400
let width = 600
let x = d3.scaleLinear().range([0, width])
let xScale = x.domain([0, 10])

// x軸
let xAxis = svg.append('g')
               .attr('class', 'xAxis')
               .attr('transform', `translate(0, ${height})`)
               .call(d3.axisBottom(xScale))

使用d3.axisTop和d3.axisBottom()來控制刻度顯示在座標軸的上方或者下方。

表現形式：

1.2 不從零開始的連續性x座標軸

狀況比較少，基本不用，因此不做闡述。

1.3 時間型x座標軸

時間軸也是線性的，因此將它歸爲此類。

let height = 400
let width = 600
let x = d3.scaleTime().range([0, width])
let xScale = x.domain([new Date(2017, 1), new Date(2017, 6)])

// x軸
let xAxis = svg.append('g')
               .attr('class', 'xAxis')
               .attr('transform', `translate(0, ${height})`)
               .call(d3.axisBottom(xScale))

表現形式：

2 非連續性x座標軸

2.1 不從零開始的非連續性x座標軸

先從不從零開始提及，由於這個用法比較正常。關鍵是使用d3.scaleBand()。

let height = 400
let width = 600
let x = d3.scaleBand().range([0, width])
let xScale = x.domain(['北京', '上海', '廣州', '深圳'])

// x軸
let xAxis = svg.append('g')
               .attr('class', 'xAxis')
               .attr('transform', `translate(0, ${height})`)
               .call(d3.axisBottom(xScale))

表現形式：

基本上，柱狀圖都會採用這種x座標軸。

2.2 從零開始的非連續性x座標軸

使用d3.scaleOrdinal()

let height = 400
let width = 600
let x = d3.scaleOrdinal().range([150, 300, 450, 600])
let xScale = x.domain(['北京', '上海', '廣州', '深圳'])

// x軸
let xAxis = svg.append('g')
               .attr('class', 'xAxisis')
               .attr('transform', `translate(0, ${height})`)
               .call(d3.axisBottom(xScale))

表現形式：

在正常狀況中，x軸的數據常常是非線性的。而繪製折線圖，散點圖等等又須要採用這種表現形式，因此這種方法是比較經常使用的。