ちょうど昼と時間から時間ディメンションを作成する方法は？ crossfilter

Question

私はのは、このデータセットを考えてみましょう、crossfilterとdc.jsを使用しています：月曜日（からに、

var dataSet = [{Day:"1", Time:"1230", Score:"30"}, // Monday at 12:30 
       {Day:"1", Time:"0830", Score:"20"},// Monday at 08:30 
       {Day:"1", Time:"0900", Score:"35"}, 
       {Day:"1", Time:"2330", Score:"40"}, 
       {Day:"1", Time:"0450", Score:"15"}, 
       {Day:"1", Time:"1830", Score:"35"}, 
       {Day:"2", Time:"0630", Score:"30"},// Tuesday at 06:30 
       {Day:"2", Time:"0230", Score:"40"},//Tuesday at 02:30 
       {Day:"2", Time:"1910", Score:"35"}, 
       {Day:"2", Time:"2130", Score:"35"}, 
       {Day:"2", Time:"2000", Score:"20"}, 
       {Day:"2", Time:"0725", Score:"15"}, 
       {Day:"3", Time:"2210", Score:"30"}, // Wenesday at 22:10 
       {Day:"3", Time:"1450", Score:"40"},// Wenesday at 14:50 
       {Day:"3", Time:"0515", Score:"45"}, 
       {Day:"3", Time:"0930", Score:"30"}, 
       {Day:"3", Time:"1100", Score:"40"}, 
       {Day:"3", Time:"1230", Score:"35"}, 
       {Day:"4", Time:"1810", Score:"30"}, // Thursday at 18:10 
       {Day:"4", Time:"1050", Score:"40"},// Thursday at 10:50 
       {Day:"4", Time:"0515", Score:"45"}, 
       {Day:"4", Time:"0930", Score:"30"}, 
       {Day:"4", Time:"1100", Score:"40"}, 
       {Day:"4", Time:"1230", Score:"35"}, 
       {Day:"5", Time:"2210", Score:"30"}, // Friday at 22:10 
       {Day:"5", Time:"1450", Score:"40"},// Friday at 14:50 
       {Day:"5", Time:"0515", Score:"40"}, 
       {Day:"5", Time:"0930", Score:"45"}, 
       {Day:"5", Time:"1100", Score:"40"}, 
       {Day:"5", Time:"1230", Score:"35"}, 
       {Day:"6", Time:"2100", Score:"30"}, // Saturday at 21:00 
       {Day:"6", Time:"0550", Score:"40"},// Saturday at 05:50 
       {Day:"6", Time:"0515", Score:"45"}, 
       {Day:"6", Time:"0930", Score:"30"}, 
       {Day:"6", Time:"1100", Score:"40"}, 
       {Day:"6", Time:"1230", Score:"35"}, 
       {Day:"7", Time:"2210", Score:"40"}, // Sunday at 22:10 
       {Day:"7", Time:"1150", Score:"35"},// Sunday at 11:50 
       {Day:"7", Time:"0515", Score:"45"}, 
       {Day:"7", Time:"0930", Score:"30"}, 
       {Day:"7", Time:"1100", Score:"40"}, 
       {Day:"7", Time:"1230", Score:"20"} 

]; 

あなたが見ることができるように、私は典型的な週持ってへ日曜日）。

そして、私は昼と時間でスコアを見ることができるbarChartを作りたいと思います。

X軸：平日、月曜日から日曜日まで、および24
Y軸から00から
24時間以内に断片化毎日：その私のスコアの値

var timeFormatweek = d3.time.format("%w%H%M"); 
d.timeweek = timeFormatweek.parse(d.Day+Time); 

しかし、私のd.Dayが変更されても、これはいつも月曜日に戻ります。 そして、チャートのスケールについては、現在進行方法はありません。

Answer 1

データを四捨五入して 'Monday-12：00'のような新しいフィールドを追加し、この時間より下にあるすべての値を月曜日の午前0時から午後12時まで合計してください。このようにして、

[{Date:"Monday-12pm", Score:"200"},// sum of all monday scores till that time 
{Date:"Tuesday-12am", Score:"300"},// sum of all monday scores till that time 
]

のようなデータセットが得られます。これらの2つのキーの寸法を作成し、dc.jsを使用してグラフを描きます。上記の計算は、次元のコンストラクタメソッドで行うこともできます。

週単位の1時間単位のチャートを作成すると、画面に収まらないため、見栄えが悪くなります。 時間分解能、6時間分解能、12時間分解能、および毎日の分解能で複数の次元を作成する方法があります。チャートの最初の日の解像度を表示し、ユーザーが1時間の解像度にズームインできるようにします。選択した範囲の差分を各ズームイベントで比較し、それに応じて解像度を変更します。乾杯。