D3.jsで間欠時系列データを表示するには？

趣味と実益を兼ねて（意味不明）株価チャートをd3.js使って表示するという作業をしていた時期がありました。ちょっと検索するとわかりますがCandlestickやOHLCチャートをd3で表示する事例はたくさんあります。

が...

いろいろ試した限りではこれらのチャートはd3.time.scale()を使っておりまして、月足や週足なら全く問題ないことはわかりました。日足でも土日休日にちょっと隙間が生じる程度ですからまあいいでしょう。でもIntradayで1分足とかやろうとすると場がしまってる間がおもいっきり空白になってしまいます。

d3.time.scale()が使えないとなると選択肢は2つしか思い浮かびません。

一つは時系列データを配列として格納し、d3.linear.scale()で表示。横軸はd3.svg.axis().tickValues()で時刻を表示。

もう一つのやり方はやはり時系列データを配列として格納しますが、d3.ordinal.scale()で表示するやり方です。横軸には時刻を入れます。

どちらのやり方もローソク足はきっちりと隙間なく表示されますが、zoom/pan操作の実装でいろいろと面倒になります。

配列として格納する場合、zoomやpanで配列範囲外が描画領域に入ってきた場合、なんらかのガードをかける必要があります。これがおもったより面倒でした。

Ordinalで表示する場合はクリック先（タップ先）の値を逆引きする実装が面倒になってきます。tooltip表示とかですね。d3.eventから拡大率をもらって、それを元のScaleに掛けて、d3.bisectで逆引きする、みたいな感じですかね。

なんとかしてこのあたりをすっきりと実装したいのですが...やっぱScaleを自ら実装するしかないんですかね。

と、特にオチのない話でした。

参考:
Create D3 x-axis that excludes weekends and holidays
Time axis: Remove scale points with no data