在一个应用程序中,我每天记录每位用户的点击事件,我想用d3对其进行可视化。
折线图显示了每个用户的一条线。 y轴是点击次数的总和,x轴是天数。
有时用户不使用该应用程序,因此当天没有数据。
但是d3要求所有数组的长度相同,并且包含相同的数据结构。我如何有效地填补空白?
示例数据:
user01: [[01.Jun, 54],[02.Jun, 32], [05.Jun, 14], [07.Jun, 87]]
user02: [[01.Jun, 89],[02.Jun, 4], [03.Jun, 93], [05.Jun, 23], [06.Jun, 57]]
user03: [[03.Jun, 57],[06.Jun, 11], [07.Jun, 45]]
应转换为:
user01: [[01.Jun, 54],[02.Jun, 32], [03.Jun, 0], [05.Jun, 14], [06.Jun, 0], [07.Jun, 87]]
user02: [[01.Jun, 89],[02.Jun, 4], [03.Jun, 93], [05.Jun, 23], [06.Jun, 57], [07.Jun, 0]]
user03: [[01.Jun, 0],[02.Jun, 0], [03.Jun, 57], [05.Jun, 0], [06.Jun, 11], [07.Jun, 45]]
有时在某天没有点击事件,在本示例中,是04.Jun,没有用户在线,因此不需要数据。
我的想法是
1.)生成所有出现的唯一x值的数组[01.Jun,02.Jun,03.Jun,05.Jun,06.Jun,07.Jun]
2.)检查每个用户的数组是否有当天的条目
3.)如果不是,则用0创建一个条目。
由于数据是实时更新的,并且用户数量是可变的:是否有一种有效的方法,最好是使用ramda来做到这一点?
谢谢你的帮助!
莫夫
编辑:天是日期对象
最佳答案
这不是最有效的解决方案,但我认为它是惯用的Ramda代码:
// data Day = Mon | Tue | Wed | Thu | Fri | Sat | Sun
//
// Day satisfies Ord, the class of orderable types.
const Mon = 1;
const Tue = 2;
const Wed = 3;
const Thu = 4;
const Fri = 5;
const Sat = 6;
const Sun = 7;
// days :: Array Day
const days = [Mon, Tue, Wed, Thu, Fri, Sat, Sun];
// defaultPairs :: Pair Day Integer
const defaultPairs = R.map(day => [day, 0], days);
// fillGaps :: Array (Pair Day Integer) -> Array (Pair Day Integer)
const fillGaps = pairs => {
const toInsert = R.differenceWith(R.eqBy(R.head), defaultPairs, pairs);
return R.sortBy(R.head, R.concat(pairs, toInsert));
};
fillGaps([[Mon, 54], [Tue, 32], [Fri, 14], [Sun, 87]]);
// => [[1, 54], [2, 32], [3, 0], [4, 0], [5, 14], [6, 0], [7, 87]]
关于javascript - 比较和转换多个数组,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37197778/