D 3で様々なスタイルのx軸を描く方法

この文書はd3.js V 4バージョンのみを使用して描画され、V 3バージョンには注目せず、時間とともに進みます.
グラフを描く過程で、直座標系は迂回できない問題で、ヒストグラム、折れ線図、散点図などは直座標系に使用する必要があります.その中で最も重要なのは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軸のデータは非線形であることが多い.折れ線図、散点図などを描くには、このような表現が必要なので、この方法はよく使われています.