DC.js - baseMixin

baseMixinfornisce i metodi di base necessari per creare qualsiasi tipo di grafico. Si va dall'impostazione della larghezza del grafico al filtraggio avanzato del grafico.

Opzioni generali del grafico

Il basicMixinfornisce molti metodi grafici per ottenere / impostare le proprietà dei grafici. Sono i seguenti,

chartID() - Restituisce l'ID numerico interno del grafico.
chartGroup( [chartGroup])- Ottiene o imposta il gruppo a cui appartiene il grafico. In DC.js, i grafici possono essere raggruppati in un unico set. Tutti i grafici in un gruppo dovrebbero condividere lo stesso set di dati Crossfilter. Vengono renderizzati e ridisegnati contemporaneamente.

mychart.chartGroup('dashboard');

minWidth( [minWidth]) - Imposta la larghezza minima del grafico.

mychart.minWidth(300);

width( [width]) - Ottiene o imposta la larghezza del grafico.

mychart.width(600);

minHeight( [minHeight]) - Ottiene o imposta l'altezza minima del grafico.

mychart.minHeight(300);

height( [height]) - Ottiene o imposta l'altezza del grafico.

mychart.height(300);

title( [titleFunction])- Ottiene o imposta la funzione del titolo. Titolo è il titolo dell'elemento SVG dell'elemento figlio nel grafico (ad esempio una singola barra in un grafico a barre). Il titolo nei grafici è rappresentato come descrizione comando nel browser.

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

label( labelFunction[??]) - Simile al metodo title (), ma imposta l'etichetta invece del titolo.

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

options(opts)- Imposta qualsiasi opzione del grafico utilizzando l'oggetto JavaScript. Ogni chiave rappresenta il metodo corrispondente disponibile nei grafici e il metodo abbinato verrà richiamato con il relativo valore.

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

Qui, il metodo width () e height () verrà attivato con il valore specificato.

legend( [legend])- Allega una legenda al grafico. La legenda può essere creata utilizzando ild3.legend() metodo.

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

anchor( parent[??])- Imposta la radice SVGElement in modo che sia la radice di un grafico esistente o qualsiasi selettore singolo D3 valido. Facoltativamente, il gruppo grafico può anche essere impostato utilizzando il secondo argomento.
anchorName() - Ottiene l'ID DOM della posizione ancorata del grafico.
svg( [svgElement]) - Restituisce lo SVGElement del grafico.
resetSvg() - Reimposta il contenitore SVG nel DOM.
root( [rootElement]) - Ottiene il contenitore radice del grafico.

Opzioni dati

basicMixinfornisce metodi per impostare i dati per i grafici. I dati sono impostati come dimensione e gruppo Crossfilter. Inoltre, fornisce un'opzione per ottenere il set di dati sottostante.

dimension( [dimension])- Imposta o ottiene la dimensione del grafico. Una dimensione è una qualsiasi dimensione Crossfilter valida.

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

group( group[??])- Imposta o ottiene il gruppo del grafico. Un gruppo è un qualsiasi gruppo Crossfilter valido. Il gruppo può essere denominato utilizzando il secondo argomento per utilizzarlo successivamente nel codice.

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

data( [callback]) - Imposta la richiamata dei dati e ci consente di ottenere il set di dati del grafico sottostante.

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

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

keyAccessor( [keyAccessor])- Ottiene o imposta la funzione di accesso alla chiave. Viene utilizzato per recuperare la chiave dal gruppo Crossfilter sottostante. La chiave viene utilizzata per le sezioni in un grafico a torta e per l'asse x nel grafico a linee / barre. Il predefinitokey accessor la funzione è la seguente:

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

valueAccessor( [valueAccessor])- Ottiene o imposta la funzione di accesso al valore. Viene utilizzato per recuperare il valore dal gruppo Crossfilter sottostante. Il valore viene utilizzato per la dimensione della fetta nel grafico a torta e per la posizione dell'asse y nel grafico a linee / barre. Il predefinitovalue accessor la funzione è la seguente:

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

ordering( [orderFunction])- Ottiene o imposta una funzione di ordinamento per ordinare la dimensione ordinale. Per impostazione predefinita, un grafico utilizzacrossfilter.quicksort.by per ordinare gli elementi.

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

Opzioni di filtro

Il filtraggio è uno dei punti salienti di DC.js. Possiamo applicare uno o più filtri direttamente sull'oggetto del grafico utilizzando il metodo filter () e chiamare il metodo redrawGroup () o dc.redrawAll () del grafico per vedere l'effetto del filtro sul grafico. Per impostazione predefinita, un oggetto del grafico accetta uno o più filtri utilizzando il metodo filter (), lo applica al set di dati Crossfilter () sottostante, ottiene i dati filtrati dal Crossfilter e ridisegna i grafici utilizzando i dati filtrati. DC.js fornisce i seguenti metodi per gestire il filtro nel grafico.

Filtro ([filtro])

Ottiene o imposta il filtro per il grafico. Se un filtro fornito è nuovo, verrà aggiunto alla raccolta di filtri del grafico e applicato al set di dati sottostante. Se il filtro fornito è già disponibile nella raccolta di filtri del grafico, rimuoverà il filtro ed eseguirà il filtro pertinente sui dati sottostanti. In breve, il metodo di filtro alternerà i filtri forniti.

mychart.filter(10);

Per rimuovere tutti i filtri, chiama il metodo del filtro con nullvalore. Il filtro può essere uno dei seguenti elementi:

null - Il grafico rimuoverà tutti i filtri applicati in precedenza.
single value - Chart chiamerà il metodo di filtro del Crossfilter sottostante e invierà il valore fornito.
dc.filters.RangedFilter- Accetta due valori, basso e alto. Il grafico filtrerà tutti i dati, tranne il valore nell'intervallo tra il valore basso e quello alto.
dc.filters.TwoDimensionalFilter - Accetta valori bidimensionali che vengono utilizzati nella mappa termica.
dc.filters.RangedTwoDimensionalFilter - È simile a dc.filters.RangedFilter, tranne per il fatto che accetta un valore bidimensionale utilizzato solo nei grafici a dispersione.

hasFilter ([filtro])

Verifica se il filtro in dotazione è disponibile o meno nel grafico.

sostituireFiltro ([filtro])

Sostituisce il filtro corrente del grafico con il filtro fornito.

filtri ()

Restituisce tutti i filtri correnti associati al grafico.

filterAll ()

Cancella tutti i filtri associati al grafico.

filterHandler ([filterHandler])

Ottiene o imposta una funzione del gestore di filtri. La funzione del gestore del filtro viene utilizzata dal grafico per filtrare il set di dati sottostante utilizzando il filtro. Il grafico ha una funzione di gestione del filtro predefinita e può essere sostituito da una funzione di gestore del filtro personalizzato utilizzando questo metodo. Il gestore del filtro predefinito è il seguente:

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])

Ottiene o imposta una funzione del gestore has-filter. Questa funzione viene utilizzata dal grafico per verificare se un filtro è disponibile o meno nella raccolta di filtri del grafico. Il gestore has-filter predefinito è il seguente:

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])

Ottiene o imposta la funzione del gestore add-filter. Questa funzione viene utilizzata dal grafico per aggiungere il filtro alla raccolta di filtri del grafico. Il gestore predefinito del filtro aggiuntivo è il seguente:

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

removeFilterHandler ([removeFilterHandler])

Ottiene o imposta la funzione del gestore di rimozione del filtro. Questa funzione viene utilizzata dal grafico per rimuovere il filtro dalla raccolta di filtri del grafico. Il filtro di rimozione predefinito è il seguente:

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])

Ottiene o imposta la funzione di gestione del filtro di ripristino. Questa funzione viene utilizzata dal grafico per reimpostare la raccolta di filtri del grafico. Il filtro di ripristino predefinito è il seguente:

function (filters) {
   return [];
}

filterPrinter ([filterPrinterFunction])

Ottiene o imposta la funzione di filtro della stampante. Questa funzione viene utilizzata dal grafico per stampare le informazioni sul filtro.

commitHandler ()

Ottiene o imposta il gestore di commit. Lo scopo del gestore di commit è inviare i dati filtrati al server in modo asincrono.

Opzioni evento

DC.js definisce un set limitato di eventi per eseguire alcune funzionalità come Filtro, Zoom, ecc. L'elenco degli eventi definiti nel DC.js è il seguente:

renderlet - Attivato dopo che le transizioni sono state ridisegnate e renderizzate.
pretransition - Sparato prima dell'inizio delle transizioni.
preRender - Sparato prima del rendering del grafico.
postRender - Sparato al termine del rendering del grafico, inclusa tutta la logica del renderlet.
preRedraw - Sparato prima del ridisegno del grafico.
postRedraw - Sparato al termine del ridisegno del grafico, inclusa tutta la logica del renderlet.
filtered - Sparato dopo aver applicato, aggiunto o rimosso un filtro.
zoomed - Sparato dopo l'attivazione di uno zoom.

basicMixin fornisce un metodo, on(event, listener) per impostare la funzione di callback per tutti gli eventi sopra definiti.

on(event, listener) - Imposta la funzione di callback o listener per l'evento specifico.
onClick(datum)- Viene passato a D3 come gestore onClick per ogni grafico. Il comportamento predefinito è filtrare in base al dato cliccato (passato al callback) e ridisegnare il gruppo di grafici.

Opzioni di rendering

BasicMixin fornisce un elenco di metodi per eseguire il rendering dei grafici. Sono usati per disegnare il grafico e sono i seguenti:

render()- Rende il grafico. Generalmente, verrà utilizzato per primo, quando viene disegnato il grafico.
renderGroup() - Visualizza tutti i grafici nel gruppo come questo grafico appartiene.
renderLabel( [renderLabel]) - Attiva / disattiva il rendering dell'etichetta.
renderTitle( [renderTitle]) - Attiva / disattiva il rendering del titolo.
redraw() - Ridisegna l'intero grafico.
redrawGroup() - Ridisegna tutti i grafici nel gruppo in quanto questo grafico appartiene.

Opzioni di transizione

BasicMixin fornisce metodi per impostare l'effetto di transizione del grafico e sono i seguenti:

transitionDelay( [delay]) - Imposta o ottiene il ritardo di transizione dell'animazione (in millisecondi) per questa istanza del grafico.
transitionDuration( [duration]) - Imposta o ottiene la durata della transizione dell'animazione (in millisecondi) per questa istanza del grafico.
useViewBoxResizing( [useViewBoxResizing]) - Se impostato, ridimensiona il grafico in base agli attributi della casella di visualizzazione SVG.
controlsUseVisibility( [controlsUseVisibility]) - se impostato, utilizza l'attributo di visibilità invece dell'attributo di visualizzazione per mostrare / nascondere un ripristino del grafico e i controlli del filtro.

Nel prossimo capitolo capiremo capMixin.

↰ Previous page Next page ↱