2013-09-25 11 views
5

Przyjrzałem się dokładnie dokumentacji dc.js i zauważyłem kilka otwartych problemów związanych z liniowymi wykresami wielu serii.Wykres liniowy wielu serii w dc.js

mam dane, które wygląda następująco:

var data = [ 
//['time', 'text', 'temperature', 'count'], 
['1379952000', 'field_1', 91, 56], 
['1379952000', 'field_2', 50, 20], 
['1379952000', 'field_3', 88, 24], 
['1379952000', 'field_4', 50, 37], 
['1379953200', 'field_1', 97, 58], 
['1379953200', 'field_2', 84, 86], 
['1379953200', 'field_3', 85, 62], 
['1379953200', 'field_4', 88, 73] 
// etc. 
]; 

Gdy jest on dodawany do crossfilter, chciałbym zrobić wykres liniowy, który ma 4 linie: jedną dla każdej wartości w polu „Tekst” (tj. "field_1", "field_2", "field_3", "field_4"). This thread sugeruje, że coś takiego jest możliwe. Postępując zgodnie z radą here wpadłem na kod w this gist.

Nie mogę w pełni zrozumieć, jak oddzielić serie danych na 4 oddzielne linie. Próbowałem używać danych filter, ale wciąż kończę jedną serię, która wydaje się mieć po prostu wszystkie punkty.

można obejrzeć na żywo przykład kod tutaj: http://bl.ocks.org/jsundram/6690354

Każda pomoc będzie mile widziane.

Aktualizacja: kod pracy jest tutaj: http://bl.ocks.org/jsundram/6728956

+0

Z jakiegoś powodu jedynym działającym dla mnie kodem jest: http://bl.ocks.org/espinielli/9f129ac2ed6ca642cb2a – Geeklhem

Odpowiedz

4

Zamieściłem widelec swojego GIST, który wydaje się działać: http://bl.ocks.org/jrideout/6710590

Kluczową zmianą było do funkcji tworzenia wiadomości:

.compose(fields.top(Infinity).map(function(d,fi) { 
    var field = d.key; 
    return dc.lineChart(time_chart) 
     .group({all:function() { 
      return time_fields.all().filter(function(d) { 
       var f = JSON.parse(d.key)[1]; 
       return f==field && d.value > 0;}); 
     }},field) 
     .colors(['#1f77b4', '#ff7f0e', '#2ca02c','#d62728']) 
     .colorAccessor(function(){return fi;}) 
     .keyAccessor(dateAcc); 
})); 

Utworzono grupę podobną do obiektu {all:data}, która zawiera twoją grupę, ale jest filtrowana według klucza.

EDYCJA: DC pracuje teraz w trybie seryjnym, aby zautomatyzować to. Zobacz: http://nickqizhu.github.io/dc.js/examples/series.html

+0

Dzięki! Dla wykresu po lewej starałem się pokazać czas na osi X i liczyć na osi y, a nie temperaturę. Przypuszczam, że to jest to, co otrzymuję za nie oznaczanie moich osi. Ale myślę, że to podejście zadziała. Opublikuję kod i zaakceptuję tę odpowiedź, gdy ją uruchomię. –

+0

Tak więc, gdy filtruję temperaturę (na przykład wybierając zakres od 60-90 stopni) w twoim kodzie, wykres liniowy zachowuje się dość nieoczekiwanie. Linie nie są już odwzorowaniem 1: 1 między czasami a temperaturami. Czy wiesz, co z tym wspólnego? –

+0

Wygląda na to, że jest to spowodowane kontrolą 'd.value> 0'. Bez tego wygląda na to, że działa dobrze. Dlaczego dodałeś ten czek? –