DC.js - baseMixin

baseMixinfornece métodos básicos necessários para criar qualquer tipo de gráfico. Ele varia desde a configuração da largura do gráfico até a filtragem avançada do gráfico.

Opções gerais de gráficos

o basicMixinfornece muitos métodos de gráfico para obter / definir as propriedades dos gráficos. Eles são os seguintes,

chartID() - Retorna o ID numérico interno do gráfico.
chartGroup( [chartGroup])- Obtém ou define o grupo ao qual o gráfico pertence. No DC.js, os gráficos podem ser agrupados em um único conjunto. Todos os gráficos em um grupo devem compartilhar o mesmo conjunto de dados Crossfilter. Eles são renderizados e redesenhados simultaneamente.

mychart.chartGroup('dashboard');

minWidth( [minWidth]) - Define a largura mínima do gráfico.

mychart.minWidth(300);

width( [width]) - Obtém ou define a largura do gráfico.

mychart.width(600);

minHeight( [minHeight]) - Obtém ou define a altura mínima do gráfico.

mychart.minHeight(300);

height( [height]) - Obtém ou define a altura do gráfico.

mychart.height(300);

title( [titleFunction])- Obtém ou define a função de título. Título é o título do elemento SVG do elemento filho no gráfico (por exemplo, uma única barra em um gráfico de barras). Os títulos nos gráficos são representados como dica de ferramenta no navegador.

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

label( labelFunction[??]) - Semelhante ao método title (), mas define o rótulo em vez do título.

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

options(opts)- Define qualquer opção de gráfico usando o objeto JavaScript. Cada chave representa o método correspondente disponível nos gráficos e o método correspondente será chamado com o valor relevante.

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

Aqui, os métodos width () e height () serão acionados com o valor especificado.

legend( [legend])- Anexa uma legenda ao gráfico. A legenda pode ser criada usando od3.legend() método.

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

anchor( parent[??])- Define o SVGElement raiz como uma raiz de gráfico existente ou qualquer seletor único D3 válido. Opcionalmente, o grupo de gráfico também pode ser definido usando o segundo argumento.
anchorName() - Obtém o ID DOM do local ancorado do gráfico.
svg( [svgElement]) - Retorna o SVGElement do gráfico.
resetSvg() - Reinicia o contêiner SVG no DOM.
root( [rootElement]) - Obtém o contêiner raiz do gráfico.

Opções de dados

basicMixinfornece métodos para definir os dados para os gráficos. Os dados são definidos como dimensão e grupo Crossfilter. Além disso, oferece uma opção para obter o conjunto de dados subjacente.

dimension( [dimension])- Define ou obtém a dimensão do gráfico. Uma dimensão é qualquer dimensão Crossfilter válida.

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

group( group[??])- Define ou obtém o grupo do gráfico. Um grupo é qualquer grupo Crossfilter válido. O grupo pode ser nomeado usando o segundo argumento para usá-lo posteriormente no código.

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

data( [callback]) - Define o retorno de chamada de dados e nos permite obter o conjunto de dados do gráfico subjacente.

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

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

keyAccessor( [keyAccessor])- Obtém ou define a função de acessador de tecla. É usado para recuperar a chave do grupo Crossfilter subjacente. A chave é usada para fatias em um gráfico de pizza e o eixo x no gráfico de linha / barra. O padrãokey accessor função é a seguinte -

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

valueAccessor( [valueAccessor])- Obtém ou define a função de acessador de valor. É usado para recuperar o valor do grupo Crossfilter subjacente. O valor é usado para o tamanho da fatia no gráfico de pizza e a posição do eixo y no gráfico de linha / barra. O padrãovalue accessor função é a seguinte -

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

ordering( [orderFunction])- Obtém ou define uma função de ordenação para ordenar a dimensão ordinal. Por padrão, um gráfico usacrossfilter.quicksort.by para classificar os elementos.

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

Opções de filtro

A filtragem é um dos destaques do DC.js. Podemos aplicar um ou mais filtros diretamente no objeto gráfico usando o método filter () e chamar o método redrawGroup () ou dc.redrawAll () do gráfico para ver o efeito de filtragem no gráfico. Por padrão, um objeto de gráfico pega um ou mais filtros usando o método filter (), aplica-o no conjunto de dados Crossfilter () subjacente, obtém os dados filtrados do Crossfilter e redesenha os gráficos usando os dados filtrados. DC.js fornece os seguintes métodos para lidar com a filtragem no gráfico.

Filtro ([filtro])

Obtém ou define o filtro do gráfico. Se um filtro fornecido for novo, ele será adicionado à coleção de filtros do gráfico e aplicado ao conjunto de dados subjacente. Se o filtro fornecido já estiver disponível na coleção de filtros do gráfico, ele removerá o filtro e fará a filtragem relevante nos dados subjacentes. Resumindo, o método de filtro alternará os filtros fornecidos.

mychart.filter(10);

Para remover todos os filtros, chame o método de filtro com nullvalor. O filtro pode ser qualquer um dos seguintes itens -

null - O gráfico removerá todos os filtros aplicados anteriormente.
single value - O gráfico chamará o método de filtro do Crossfilter subjacente e enviará o valor fornecido.
dc.filters.RangedFilter- Aceita dois valores, baixo e alto. O gráfico filtrará todos os dados, exceto o valor no intervalo entre o valor baixo e alto.
dc.filters.TwoDimensionalFilter - Aceita valores bidimensionais que são usados no mapa de calor.
dc.filters.RangedTwoDimensionalFilter - É semelhante ao dc.filters.RangedFilter, exceto que aceita um valor bidimensional usado apenas em gráficos de dispersão.

hasFilter ([filtro])

Verifica se o filtro fornecido está disponível ou não no gráfico.

substituirFiltro ([filtro])

Substitui o filtro atual do gráfico pelo filtro fornecido.

filtros ()

Retorna todos os filtros atuais associados ao gráfico.

filterAll ()

Limpa todos os filtros associados ao gráfico.

filterHandler ([filterHandler])

Obtém ou define uma função de manipulador de filtro. A função de manipulador de filtro é usada pelo gráfico para filtrar o conjunto de dados subjacente usando o filtro. O gráfico tem uma função de manipulador de filtro padrão e pode ser substituído por uma função de manipulador de filtro personalizado usando este método. O manipulador de filtro padrão é o seguinte -

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

Obtém ou define uma função de manipulador tem-filtro. Esta função é usada pelo gráfico para verificar se um filtro está disponível na coleção de filtros do gráfico ou não. O manipulador de filtro padrão é o seguinte -

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

Obtém ou define a função de manipulador adicionar filtro. Esta função é usada pelo gráfico para adicionar o filtro à coleção de filtros do gráfico. O manipulador de adição de filtro padrão é o seguinte -

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

removeFilterHandler ([removeFilterHandler])

Obtém ou define a função de manipulador remove-filter. Esta função é usada pelo gráfico para remover o filtro da coleção de filtros do gráfico. O filtro de remoção padrão é o seguinte -

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

Obtém ou define a função de manipulador de filtro de redefinição. Esta função é usada pelo gráfico para redefinir a coleção de filtros do gráfico. O filtro de redefinição padrão é o seguinte -

function (filters) {
   return [];
}

filterPrinter ([filterPrinterFunction])

Obtém ou define a função de filtro da impressora. Esta função é usada pelo gráfico para imprimir as informações do filtro.

commitHandler ()

Obtém ou define o manipulador de confirmação. O objetivo do manipulador de confirmação é enviar os dados filtrados ao servidor de forma assíncrona.

Opções de Evento

DC.js define um conjunto limitado de eventos para fazer algumas funcionalidades, como Filtragem, Zoom, etc. A lista de eventos definidos no DC.js são os seguintes -

renderlet - Disparado após as transições serem redesenhadas e renderizadas.
pretransition - Disparado antes do início das transições.
preRender - Disparado antes da renderização do gráfico.
postRender - Disparado depois que o gráfico termina a renderização, incluindo toda a lógica do renderlet.
preRedraw - Disparado antes de redesenhar o gráfico.
postRedraw - Disparado depois que o gráfico termina de ser redesenhado, incluindo toda a lógica do renderlet.
filtered - Disparado após um filtro ser aplicado, adicionado ou removido.
zoomed - Disparado após o zoom ser acionado.

basicMixin fornece um método, on(event, listener) para definir a função de retorno de chamada para todos os eventos definidos acima.

on(event, listener) - Define o retorno de chamada ou função de ouvinte para o evento específico.
onClick(datum)- É passado para D3 como o manipulador onClick para cada gráfico. O comportamento padrão é filtrar no datum clicado (passado para o retorno de chamada) e redesenhar o grupo de gráfico.

Opções de renderização

O basicMixin fornece uma lista de métodos para renderizar os gráficos. Eles são usados para desenhar o gráfico e são os seguintes -

render()- Processa o gráfico. Geralmente, ele será usado primeiro, quando o gráfico for desenhado.
renderGroup() - Renderiza todos os gráficos no grupo ao qual este gráfico pertence.
renderLabel( [renderLabel]) - Liga / desliga a renderização de rótulos.
renderTitle( [renderTitle]) - Liga / desliga a renderização do título.
redraw() - Redesenha o gráfico inteiro.
redrawGroup() - Redesenha todos os gráficos do grupo ao qual este gráfico pertence.

Opções de transição

O basicMixin fornece métodos para definir o efeito de transição do gráfico e eles são os seguintes -

transitionDelay( [delay]) - Define ou obtém o atraso de transição da animação (em milissegundos) para esta instância do gráfico.
transitionDuration( [duration]) - Define ou obtém a duração da transição da animação (em milissegundos) para esta instância do gráfico.
useViewBoxResizing( [useViewBoxResizing]) - Se definido, redimensiona o gráfico de acordo com os atributos da caixa de visualização SVG.
controlsUseVisibility( [controlsUseVisibility]) - se definido, usa o atributo de visibilidade em vez do atributo de exibição para mostrar / ocultar uma redefinição de gráfico e controles de filtro.

No próximo capítulo, vamos entender a capMixina.