javascript - 比较和转换多个数组

标签 javascript d3.js ramda.js

在一个应用程序中,我记录每个用户每天的点击事件,我想用 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]]

有时某天没有点击事件,本例中 6 月 4 日没有用户在线,因此不需要数据。

我的想法是......

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/

相关文章:

javascript - 如何防止在本地存储中存储重复值?

java - 使用ajax post将json从js发送到 Controller

javascript - 如何正确使用 Ramda/JS 编写函数

javascript - 免点调试

javascript - 如何在 Javascript 中使用 JSON 文件作为对象数组

javascript - 我怎样才能使这段代码在 Ramda.js/lodash 中更像 'functional programming' 风格

javascript - 有条件地在 Controller 中接收同步或异步对象( Angular 、 ionic )

javascript - 将 Content MathML 转换为 javascript 中的中缀/数学符号字符串

javascript - 在 dom 元素对象上使用 reduce 函数

d3.js - D3可视化创建建筑/校园 map