如何从一天和时间创建时间维度？交叉过滤器

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"}

];

如您所见，我有一个典型的一周，从 1 到 7（星期一 到 星期日 )。

我想制作一个条形图，我可以在其中按日期和时间查看分数。

X 轴：工作日，从周一到周日，每天都在
从 00 到 24 的 24 小时
Y 轴：分数的值

为此我必须创建一个时间维度，我尝试了这个但没有很好的结果：

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

但是这个返回总是星期一，即使我的 d.Day 改变了。 而对于图表的比例，现在不知道如何进行。

Answer 1

尝试格式化您的数据以四舍五入以添加一个新字段，例如“周一至 12:00”，并将周一至该时间低于该时间（即周一上午 00 点至下午 12 点）的所有值相加。这样，您将拥有一个结果数据集，例如

[{Date:"Monday-12pm", Score:"200"},// 到那时为止的所有星期一分数的总和
 {Date:"Tuesday-12am", Score:"300"},// 到那时为止的所有星期一分数的总和
 ] 

现在在这两个键上制作尺寸并使用 dc.js 绘制图表。您也可以在维度的构造方法中进行上述计算。

制作整个工作日的每小时值图表看起来不太好，因为它不适合屏幕。 另一种方法是在每小时分辨率、6 小时分辨率、12 小时分辨率和每日分辨率上制作多个维度。首先在图表上显示每日分辨率，并允许用户放大到每小时分辨率。在每个缩放事件上比较所选范围的差异并相应地更改分辨率。干杯。