2016-05-12 3 views
2

В приложении я регистрирую события кликов в день для каждого пользователя, и я хотел бы визуализировать их с помощью 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.) генерировать массив всех встречающихся уникальных рентгеновских значений [01.Jun, 02.Jun, 03.Jun, 05.Jun, 06.Jun, 07.Jun]

2.) проверить массив каждого пользователя, если есть запись в этот день

3.), если не чем создать запись с 0.

Поскольку данные в прямом эфире обновляется, а число пользователей является переменным: есть ли эффективный способ сделать это, желательно с ramda?

Благодарим за помощь!

Muff

EDIT: Дни Дата Объекты

+1

Посмотрите главу [* Padding для нулевых значений *] (https: // leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-padding-for-zero-values) из книги [* D3 Советы и подсказки *] (https://leanpub.com/D3-Tips- и-Трики/чтение). Глава была вдохновлена ​​следующим вопросом о SO: [* «Как добавить нулевые значения в временные ряды в d3.js/JavaScript» *] (/ q/23227991). – altocumulus

+0

Это решение, спасибо! – Raggamuffin

ответ

1

Это не является наиболее эффективным решением, но я считаю это идиоматическое 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]] 
1

Вот решение с использованием цикла. Он работает нормально. Я добавил Thu в четверг, я подумал, что, возможно, вы пропустили это. Но если вам это не нужно, удалите это из массива days.

var user01 = [ 
    ['Mon', 54], 
    ['Tue', 32], 
    ['Fri', 14], 
    ['Sun', 87] 
]; 

var days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; 

function fillGap(input) { 
    var data = []; 
    var index = 0; 
    days.forEach(function(day) { 
    if (input[index][0] == day) { 
     data.push(input[index]); 
     index++; 
    } else { 
     data.push([day, 0]); 
    } 
    }); 
    return data; 
} 

console.log(fillGap(user01)); 

Выход:

[[ "ПН", 54], [ "Вт", 32], [ "ср", 0], [ "чет", 0], [ "ПТ", 14], [ "СБ", 0], [ "ВС", 87]]

Я создал jsbin, вы можете экспериментировать там.

http://jsbin.com/hunudul/edit?html,js,console,output

+0

Спасибо!Я должен был быть более ясным: сокращение по будням, которое я только выбрал для примера, на самом деле его объект Date, и они не предопределены, как в будние дни. Я редактировал вопрос. – Raggamuffin

+0

@ Raggamuffin Не тратьте чужие вещи на неправильный вопрос, а затем продолжайте обновление в течение недели. –

+0

@Raggamuffin '01.Jun' не является ни строкой, ни именем переменной, почему вы смотрите на фактические значения, а затем публикуете. –