カスタムd 3時間軸

d 3の時間スケールスケールscaleTimeを使用していますが、展示形式はYYY-M-DD HH:mm:ssの時、文字で覆われている問題があります.内部のticksメソッドは間隔をうまくコントロールできません.ticksは参考値だけですので、実際に展示すると、座標軸のlabel個数がticksより多くなる可能性があります.時間展示のカバレッジ問題を解決するなら、一つの案は実際に展示された個数がticksより大きくないので、上書きを避けることができます.d 3は、座標軸を完全にカスタマイズするためのtickValuesの表示方法を提供しています.もちろん、間隔の計算、計測時の処理、時分秒の処理も自分で実現する必要があります.参考にする案を以下に示します.

// scale     ，      domain range，   ticks

export function getTickValues(scale, domain, range, ticks = 10) {
//              
//           
let left = nice(scale.invert(range[0]))
let right = nice(scale.invert(range[1]))
let leftRightRange = (right - left) / 1000
let interval = Math.ceil(leftRightRange / ticks)
let count = Math.ceil((domain[1] - domain[0]) / 1000 / interval)

//     
if (interval / 86400 > 0.5) {
  interval = Math.ceil(interval / 86400) * 86400
} else if (interval > 3600) {
  interval = Math.ceil(interval / 3600) * 3600
} else if (interval > 1800) {
  interval = Math.ceil(interval / 1800) * 1800
} else if (interval > 900) {
  interval = Math.ceil(interval / 900) * 900
} else if (interval > 600) {
  interval = Math.ceil(interval / 600) * 600
} else if (interval > 300) {
  interval = Math.ceil(interval / 300) * 300
} else if (interval > 60) {
  interval = Math.ceil(interval / 60) * 60
}

let tickValues = d3.range(count).map(item => {
  return item * interval * 1000 + domain[0]
})
//          
return tickValues.filter(item => {
  return item >= left && item <= right
})
}

invert関数により、レンゲに対応するdomainを見つけ、各セグメントの間隔を処理して整理します.開始時間からすべての間隔を得て、見えないデータをフィルタリングします.折れ線図の展示に適しています.ヒストグラムについても同様の方法がありますが、この基礎の上にもう一歩処理する必要があります.