DC.js - baseMixin

baseMixinzawiera podstawowe metody potrzebne do tworzenia dowolnego typu wykresu. Obejmuje zakres od ustawiania szerokości wykresu do zaawansowanego filtrowania wykresu.

Ogólne opcje wykresów

Plik basicMixinzapewnia wiele metod tworzenia / ustawiania właściwości wykresów. Są one następujące:

chartID() - Zwraca wewnętrzny numeryczny identyfikator wykresu.
chartGroup( [chartGroup])- Pobiera lub ustawia grupę, do której należy wykres. W DC.js wykresy można pogrupować w jeden zestaw. Oczekuje się, że wszystkie wykresy w grupie będą miały ten sam zestaw danych Crossfilter. Są one renderowane i przerysowywane jednocześnie.

mychart.chartGroup('dashboard');

minWidth( [minWidth]) - Ustawia minimalną szerokość wykresu.

mychart.minWidth(300);

width( [width]) - Pobiera lub ustawia szerokość wykresu.

mychart.width(600);

minHeight( [minHeight]) - Pobiera lub ustawia minimalną wysokość wykresu.

mychart.minHeight(300);

height( [height]) - Pobiera lub ustawia wysokość wykresu.

mychart.height(300);

title( [titleFunction])- Pobiera lub ustawia funkcję tytułu. Tytuł to tytuł elementu SVG elementu podrzędnego na wykresie (np. Pojedynczy słupek na wykresie słupkowym). Tytuł na wykresach jest przedstawiany jako podpowiedź w przeglądarce.

mychart.title(function(data) { 
   return d.key + ': ' + d.value; 
});

label( labelFunction[??]) - Podobna do metody title (), ale ustawia etykietę zamiast tytułu.

mychart.label(function(data) { 
   return d.key + ': ' + d.value; 
});

options(opts)- Ustawia dowolną opcję wykresu za pomocą obiektu JavaScript. Każdy klucz reprezentuje odpowiednią metodę dostępną na wykresach, a dopasowana metoda zostanie wywołana z odpowiednią wartością.

mychart.options ({
   'width' : 300,
   'height' : 300
});

Tutaj metody width () i height () zostaną uruchomione z określoną wartością.

legend( [legend])- Dołącza legendę do wykresu. Legendę można utworzyć za pomocąd3.legend() metoda.

mychart.legend (
   dc.legend()
      .x(500)
      .y(50)
      .itemHeight(12)
      .gap(4))

anchor( parent[??])- Ustawia główny element SVGElement jako katalog główny istniejącego wykresu lub dowolne prawidłowe pojedyncze selektory D3. Opcjonalnie grupę wykresów można również ustawić za pomocą drugiego argumentu.
anchorName() - Pobiera identyfikator DOM zakotwiczonej lokalizacji wykresu.
svg( [svgElement]) - Zwraca SVGElement wykresu.
resetSvg() - Resetuje kontener SVG w DOM.
root( [rootElement]) - Pobiera główny kontener wykresu.

Opcje danych

basicMixinzapewnia metody ustawiania danych dla wykresów. Dane są ustawione jako wymiar i grupa Crossfilter. Ponadto zapewnia opcję uzyskania bazowego zestawu danych.

dimension( [dimension])- Ustawia lub pobiera wymiar wykresu. Wymiar to dowolny prawidłowy wymiar Crossfilter.

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);

group( group[??])- Ustawia lub pobiera grupę wykresu. Grupa to dowolna prawidłowa grupa Crossfilter. Grupa może zostać nazwana przy użyciu drugiego argumentu, aby użyć jej później w kodzie.

var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));

data( [callback]) - Ustawia wywołanie zwrotne danych i umożliwia nam pobranie zestawu danych wykresu bazowego.

// get all groups
mychart.data(function (group) { 
   return group.all(); 
});

// get top five groups
mychart.data(function (group) { 
   return group.top(5); 
});

keyAccessor( [keyAccessor])- Pobiera lub ustawia funkcję akcesorium klucza. Służy do pobierania klucza z podstawowej grupy Crossfilter. Klawisz jest używany w przypadku wycinków na wykresie kołowym i osi X na wykresie liniowym / słupkowym. Domyślnykey accessor funkcja jest następująca -

chart.keyAccessor(function(d) { return d.key; });

valueAccessor( [valueAccessor])- Pobiera lub ustawia funkcję akcesora wartości. Służy do pobierania wartości z podstawowej grupy Crossfilter. Wartość jest używana do określenia rozmiaru wycinka na wykresie kołowym i pozycji osi Y na wykresie liniowym / słupkowym. Domyślnyvalue accessor funkcja jest następująca -

chart.valueAccessor(function(d) { return d.value; });

ordering( [orderFunction])- Pobiera lub ustawia funkcję porządkowania w celu zamówienia wymiaru porządkowego. Domyślnie wykres używacrossfilter.quicksort.by sortować elementy.

_chart.ordering(dc.pluck('key'));

Opcje filtru

Filtrowanie jest jednym z najważniejszych elementów DC.js. Możemy zastosować jeden lub więcej filtrów bezpośrednio na obiekcie wykresu za pomocą metody filter () i wywołać metodę redrawGroup () lub dc.redrawAll () wykresu, aby zobaczyć efekt filtrowania na wykresie. Domyślnie obiekt wykresu przyjmuje jeden lub więcej filtrów za pomocą metody filter (), stosuje go do bazowego zestawu danych Crossfilter (), pobiera przefiltrowane dane z Crossfilter i przerysowuje wykresy przy użyciu przefiltrowanych danych. DC.js udostępnia następujące metody obsługi filtrowania na wykresie.

Filtruj ([filter])

Pobiera lub ustawia filtr dla wykresu. Jeśli podany filtr jest nowy, zostanie dodany do kolekcji filtrów wykresu i zastosowany do bazowego zestawu danych. Jeśli dostarczony filtr jest już dostępny w kolekcji filtrów wykresu, usunie on filtr i przeprowadzi odpowiednie filtrowanie danych bazowych. Krótko mówiąc, metoda filtru spowoduje przełączenie dostarczonych filtrów.

mychart.filter(10);

Aby usunąć wszystkie filtry, wywołaj metodę filtru za pomocą nullwartość. Filtr może być jednym z następujących elementów -

null - Wykres usunie wszystkie zastosowane wcześniej filtry.
single value - Chart wywoła bazową metodę filtra Crossfilter i wyśle podaną wartość.
dc.filters.RangedFilter- Akceptuje dwie wartości, niską i wysoką. Wykres odfiltruje wszystkie dane, z wyjątkiem wartości z zakresu od niskiej do wysokiej wartości.
dc.filters.TwoDimensionalFilter - Przyjmuje dwuwymiarowe wartości używane w mapie cieplnej.
dc.filters.RangedTwoDimensionalFilter - Jest podobny do dc.filters.RangedFilter, z tą różnicą, że akceptuje dwuwymiarową wartość używaną tylko na wykresach punktowych.

hasFilter ([filtr])

Sprawdza, czy dostarczony filtr jest dostępny na wykresie, czy nie.

replaceFilter ([filtr])

Zastępuje bieżący filtr wykresu dostarczonym filtrem.

filtry ()

Zwraca wszystkie bieżące filtry powiązane z wykresem.

filterAll ()

Czyści wszystkie filtry skojarzone z wykresem.

filterHandler ([filterHandler])

Pobiera lub ustawia funkcję obsługi filtru. Funkcja obsługi filtru jest używana przez wykres do filtrowania bazowego zestawu danych przy użyciu filtru. Wykres ma domyślną funkcję obsługi filtra i można go zastąpić niestandardową funkcją obsługi filtru przy użyciu tej metody. Domyślna obsługa filtru jest następująca -

chart.filterHandler(function (dimension, filters) {
   if (filters.length === 0) {
      
      // the empty case (no filtering)
      dimension.filter(null);
   } else if (filters.length === 1 && !filters[0].isFiltered) {
      
      // single value and not a function-based filter
      dimension.filterExact(filters[0]);
   } else if (filters.length === 1 && filters[0].filterType === 'RangedFilter') {
      
      // single range-based filter
      dimension.filterRange(filters[0]);
   } else {
      
      // an array of values, or an array of filter objects
      dimension.filterFunction(function (d) {
         
         for (var i = 0; i < filters.length; i++) {
            var filter = filters[i];
               
            if (filter.isFiltered && filter.isFiltered(d)) {
               return true;
            } else if (filter <= d && filter >= d) {
               return true;
            }
         }
         return false;
      });
   }
   return filters;
});

hasFilterHandler ([hasFilterHandler])

Pobiera lub ustawia funkcję obsługi filtru hasłowego. Ta funkcja jest używana przez wykres do sprawdzania, czy filtr jest dostępny w kolekcji filtrów wykresu, czy nie. Domyślna procedura obsługi filtru ma następującą postać -

chart.hasFilterHandler(function (filters, filter) {
   if (filter === null || typeof(filter) === 'undefined') {
      return filters.length > 0;
   }
   
   return filters.some(function (f) {
      return filter <= f && filter >= f;
   });
});

addFilterHandler ([addFilterHandler])

Pobiera lub ustawia funkcję obsługi dodawania filtru. Ta funkcja jest używana przez wykres w celu dodania filtru do kolekcji filtrów wykresu. Domyślna procedura obsługi dodawania filtru jest następująca -

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler ([removeFilterHandler])

Pobiera lub ustawia funkcję obsługi remove-filter. Ta funkcja jest używana przez wykres do usuwania filtru z kolekcji filtrów wykresu. Domyślny filtr usuwania jest następujący -

chart.removeFilterHandler(function (filters, filter) {
   for (var i = 0; i < filters.length; i++) {
      
      if (filters[i] <= filter && filters[i] >= filter) {
         filters.splice(i, 1);
         break;
      }
      
   }
   return filters;
});

resetFilterHandler ([resetFilterHandler])

Pobiera lub ustawia funkcję obsługi resetowania filtra. Ta funkcja jest używana przez wykres do resetowania kolekcji filtrów wykresu. Domyślny filtr resetowania jest następujący -

function (filters) {
   return [];
}

filterPrinter ([filterPrinterFunction])

Pobiera lub ustawia funkcję filtru drukarki. Ta funkcja jest używana przez wykres do drukowania informacji o filtrze.

commitHandler ()

Pobiera lub ustawia procedurę obsługi zatwierdzania. Celem procedury obsługi zatwierdzania jest asynchroniczne wysyłanie przefiltrowanych danych do serwera.

Opcje wydarzenia

DC.js definiuje ograniczony zestaw zdarzeń do wykonania niektórych funkcji, takich jak filtrowanie, powiększanie itp. Lista zdarzeń zdefiniowanych w DC.js jest następująca -

renderlet - Uruchomione po przerysowaniu i renderowaniu przejść.
pretransition - Wystrzelony przed rozpoczęciem przejść.
preRender - Uruchomiony przed renderowaniem wykresu.
postRender - Uruchamiane po zakończeniu renderowania wykresu, w tym całej logiki renderletu.
preRedraw - Wystrzelony przed przerysowaniem mapy.
postRedraw - Uruchamiane po zakończeniu przerysowywania wykresu, w tym całej logiki renderletu.
filtered - Odpalane po zastosowaniu, dodaniu lub usunięciu filtra.
zoomed - Wystrzelony po uruchomieniu zoomu.

basicMixin podaje metodę, on(event, listener) aby ustawić funkcję zwrotną dla wszystkich wyżej zdefiniowanych zdarzeń.

on(event, listener) - Ustawia funkcję oddzwaniania lub nasłuchiwania dla określonego zdarzenia.
onClick(datum)- Jest przekazywany do D3 jako moduł obsługi onClick dla każdego wykresu. Domyślnym zachowaniem jest filtrowanie na klikniętej danej (przekazanej do wywołania zwrotnego) i przerysowanie grupy wykresów.

Opcje renderowania

BasicMixin zawiera listę metod renderowania wykresów. Służą do rysowania wykresu i wyglądają następująco -

render()- Renderuje wykres. Generalnie będzie on używany jako pierwszy podczas rysowania wykresu.
renderGroup() - Renderuje wszystkie wykresy w grupie zgodnie z tym wykresem.
renderLabel( [renderLabel]) - Włącza / wyłącza renderowanie etykiet.
renderTitle( [renderTitle]) - Włącza / wyłącza renderowanie tytułów.
redraw() - Przerysowuje cały wykres.
redrawGroup() - Przerysowuje wszystkie wykresy w grupie zgodnie z tym wykresem.

Opcje przejścia

BasicMixin zapewnia metody ustawiania efektu przejścia wykresu i są one następujące -

transitionDelay( [delay]) - Ustawia lub pobiera opóźnienie przejścia animacji (w milisekundach) dla tej instancji wykresu.
transitionDuration( [duration]) - Ustawia lub pobiera czas trwania przejścia animacji (w milisekundach) dla tej instancji wykresu.
useViewBoxResizing( [useViewBoxResizing]) - Jeśli jest ustawiona, zmienia rozmiar wykresu zgodnie z atrybutami pola widoku SVG.
controlsUseVisibility( [controlsUseVisibility]) - jeśli jest ustawiona, używa atrybutu widoczności zamiast atrybutu wyświetlania, aby pokazać / ukryć resetowanie wykresu i elementy sterujące filtrem.

W następnym rozdziale zrozumiemy capMixin.