x軸上のカスタムD3 `tickValue` - 水平棒グラフ

Question

X軸にカスタムティック値を作成しようとしています。

グラフはdata.csvファイルから生成されます。 144のデータポイントがあります。各データ値は10分サイクルを表しているため、最初のダニは1時間を表す6番目のティックに表示されます。

たとえば、.domain([new Date('2014-03-08T12:00:00'), new Date('2014-03-9T00:00:00')])を使用すると、X軸は正しく表示されますが、グラフは消えてしまいます。

この場合、tickValues([])は使用できません。

X軸には、00:00 AM...(6 tick values)...1:00 AM...(6 tick values)...2:00 AMなどが表示されます。または、00:00 AM...(12 tick values)...2:00 AM...(12 tick values)...3:00 AMなどとすることができます。カスタマイズすることができます。

これが可能であるかどうかはわかりません。私はこの単純な例http://bl.ocks.org/phoebebright/3059392に従ってみましたが、もう一度、私はX軸を正しく取得しましたが、私のグラフはなくなりました。

これは、コードのようになります。https://plnkr.co/edit/kc4E43Bgo4bNMB9hKX2j?p=preview

は、事前にありがとうございます！

Answer 1

あなたのデータは実際の日付値が含まれていないので、これは私のソリューションです：

あなたは、各目盛りは10分を表しているので、6のうちの1つの目盛りを表示したいとあなただけ」を表示したいです毎時 "ダニ。だから、あなたのXスケールのドメインを使用してダニ値を定義します。その後、

.tickValues(d3.range(x.domain()[0], x.domain()[1]).filter(function(d) { 
    return d % 6 === 0; 
})) 

そして、それぞれに:00を追加するダニをフォーマット：ここで

.tickFormat(function(d) { 
    return d/6 + ":00"; 
}); 

は、あなたの更新plunkerです：https://plnkr.co/edit/8EOGt8UvYq1J8qpIdArN?p=preview

編集：コメントで説明したように、ここでは「am」と「pm」の解決策があります。https://plnkr.co/edit/OvtVlgT4I6Y19hgoMKIK?p=preview