2015-01-24 15 views
6

Chcę wykreślić pewne dane szeregów czasowych, które nie są ciągłe (przerwy w datach w weekendy, święta itp.). To codzienne dane.D3 Non-Continuous Dates Domena Daje przerwy na osi X

Dane wyglądał:

date,value 
1/2/15,109.33 
1/5/15,106.25 
1/6/15,106.26 
1/7/15,107.75 
1/8/15,111.89 
1/9/15,112.01 
1/12/15,109.25 
1/13/15,110.22 
... 

więc definiować moje x i yscales:

var x = d3.time.scale().range([0, width]); 
var y = d3.scale.linear().range([height, 0]); 

i ustawić domenę od mojego danych źródłowych:

x.domain(d3.extent(data, function(d) { return d.date; })); 
y.domain(d3.extent(data, function(d) { return d.value; })); 

The problemem jest jednak to, że moje daty mają luki im. A moja oś X zawiera teraz te brakujące daty (d3.time.scale() robi to automatycznie, jak sądzę, ponieważ mapuje na ciągły zakres?).

.extent() znajduje wartości maksymalne i minimalne w date, a następnie .domain() zwraca te wartości maksymalne i minimalne jako zakres dla osi X. Ale nie jestem pewien, jak radzić sobie z lukami i zwracać daty bez luki do zakresu.

Moje pytanie brzmi: w jaki sposób mój zakres osi X może zawierać tylko daty z mojego zestawu danych? I nie "wypełniaj pustych miejsc". Czy powinienem grać z d3.time.scale().range()? lub czy muszę użyć innego scale?

Jaki jest prawidłowy sposób to zrobić? Czy ktoś może wskazać mi właściwy kierunek lub podać przykład? Dziękuję Ci!

Proszę też, chcę rozwiązać za pomocą zwykłego d3 i javascript. Nie jestem zainteresowany wykorzystaniem jakichkolwiek bibliotek abstrakcji stron trzecich.

+4

Można użyć skali porządkowej. –

Odpowiedz

4

Jak wskazuje Lars Kotthof, można utworzyć porządkową oś X, która "wygląda" jak skala czasu. Zakładając, że chcesz narysować szereg czasowy jako linię, oto przykład jak to zrobić: http://jsfiddle.net/ee2todev/3Lu46oqg/

Jeśli chcesz dostosować swój format do dat, np. Przedstaw datę jako dzień (tygodnia), dzień i miesiąc, aby najpierw przekonwertować ciąg znaków na datę. Dodałem jeden przykład, który formatuje daty we wspólnym niemieckim formacie. Ale możesz łatwo dostosować kod do swoich potrzeb. http://jsfiddle.net/ee2todev/phLbk0hf/

Last but not least, można użyć

axis.tickValues([values]) 

wyboru daty, które chcesz wyświetlić. Zobacz także: https://github.com/mbostock/d3/wiki/SVG-Axes#tickFormat

0

Komponent d3fc-discontinuous-scale dostosowuje każdą inną skalę (na przykład skalę czasu d3) i dodaje pojęcie nieciągłości.

Te nieciągłości są określane przez "dostawcę nieciągłości", wbudowany w discontinuitySkipWeekends pozwala pominąć weekendy.

Oto przykład:

const skipWeekendScale = fc.scaleDiscontinuous(d3.scaleTime()) 
    .discontinuityProvider(fc.discontinuitySkipWeekends()); 

A oto pełna demo: https://bl.ocks.org/ColinEberhardt/0a5cc7ca6c256dcd6ef1e2e7ffa468d4