DC.js - baseMixin
baseMixinproporciona los métodos básicos necesarios para crear cualquier tipo de gráfico. Va desde establecer el ancho del gráfico hasta el filtrado avanzado del gráfico.
Opciones generales de gráficos
los basicMixinproporciona muchos métodos de gráficos para obtener / establecer las propiedades de los gráficos. Son los siguientes,
chartID() - Devuelve el ID numérico interno del gráfico.
chartGroup( [chartGroup])- Obtiene o establece el grupo al que pertenece el gráfico. En DC.js, los gráficos se pueden agrupar en un solo conjunto. Se espera que todos los gráficos de un grupo compartan el mismo conjunto de datos Crossfilter. Se renderizan y se vuelven a dibujar simultáneamente.
mychart.chartGroup('dashboard');minWidth( [minWidth]) - Establece el ancho mínimo del gráfico.
mychart.minWidth(300);width( [width]) - Obtiene o establece el ancho del gráfico.
mychart.width(600);minHeight( [minHeight]) - Obtiene o establece la altura mínima del gráfico.
mychart.minHeight(300);height( [height]) - Obtiene o establece la altura del gráfico.
mychart.height(300);title( [titleFunction])- Obtiene o establece la función de título. Título es el título del elemento SVG del elemento secundario en el gráfico (por ejemplo, una sola barra en un gráfico de barras). El título en los gráficos se representa como información sobre herramientas en el navegador.
mychart.title(function(data) {
return d.key + ': ' + d.value;
});label( labelFunction[??]) - Similar al método title (), pero establece la etiqueta en lugar del título.
mychart.label(function(data) {
return d.key + ': ' + d.value;
});options(opts)- Establece cualquier opción de gráfico utilizando el objeto JavaScript. Cada clave representa el método correspondiente disponible en los gráficos y el método coincidente se invocará con el valor relevante.
mychart.options ({
'width' : 300,
'height' : 300
});Aquí, el método width () y height () se activará con el valor especificado.
legend( [legend])- Adjunta una leyenda al gráfico. La leyenda se puede crear usando eld3.legend() método.
mychart.legend (
dc.legend()
.x(500)
.y(50)
.itemHeight(12)
.gap(4))anchor( parent[??])- Establece el SVGElement raíz para que sea la raíz de un gráfico existente o cualquier selector único D3 válido. Opcionalmente, el grupo de gráficos también se puede configurar mediante el segundo argumento.
anchorName() - Obtiene el ID de DOM de la ubicación anclada del gráfico.
svg( [svgElement]) - Devuelve el SVGElement del gráfico.
resetSvg() - Restablece el contenedor SVG en el DOM.
root( [rootElement]) - Obtiene el contenedor raíz del gráfico.
Opciones de datos
basicMixinproporciona métodos para configurar los datos de los gráficos. Los datos se establecen como dimensión y grupo de filtro cruzado. Además, proporciona una opción para obtener el conjunto de datos subyacente.
dimension( [dimension])- Establece u obtiene la dimensión del gráfico. Una dimensión es cualquier dimensión de filtro cruzado válida.
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);group( group[??])- Establece u obtiene el grupo del gráfico. Un grupo es cualquier grupo de filtros cruzados válido. El grupo se puede nombrar usando el segundo argumento para usarlo más adelante en el código.
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));data( [callback]) - Establece la devolución de llamada de datos y nos permite obtener el conjunto de datos del gráfico subyacente.
// get all groups
mychart.data(function (group) {
return group.all();
});
// get top five groups
mychart.data(function (group) {
return group.top(5);
});keyAccessor( [keyAccessor])- Obtiene o establece la función de acceso clave. Se utiliza para recuperar la clave del grupo Crossfilter subyacente. La clave se utiliza para sectores en un gráfico circular y el eje x en el gráfico de líneas / barras. El valor por defectokey accessor la función es la siguiente:
chart.keyAccessor(function(d) { return d.key; });valueAccessor( [valueAccessor])- Obtiene o establece la función de acceso al valor. Se utiliza para recuperar el valor del grupo Crossfilter subyacente. El valor se utiliza para el tamaño del sector en el gráfico circular y la posición del eje y en el gráfico de líneas / barras. El valor por defectovalue accessor la función es la siguiente:
chart.valueAccessor(function(d) { return d.value; });ordering( [orderFunction])- Obtiene o establece una función de ordenación para ordenar la dimensión ordinal. De forma predeterminada, un gráfico usacrossfilter.quicksort.by para ordenar los elementos.
_chart.ordering(dc.pluck('key'));Opciones de filtro
El filtrado es uno de los aspectos más destacados de DC.js. Podemos aplicar uno o más filtros directamente en el objeto del gráfico usando el método filter () y llamar al método redrawGroup () o dc.redrawAll () del gráfico para ver el efecto de filtrado en el gráfico. De forma predeterminada, un objeto de gráfico toma uno o más filtros usando el método filter (), lo aplica en el conjunto de datos de Crossfilter () subyacente, obtiene los datos filtrados del Crossfilter y vuelve a dibujar los gráficos usando los datos filtrados. DC.js proporciona los siguientes métodos para manejar el filtrado en el gráfico.
Filtro ([filtro])
Obtiene o establece el filtro del gráfico. Si un filtro proporcionado es nuevo, se agregará a la colección de filtros del gráfico y se aplicará al conjunto de datos subyacente. Si el filtro proporcionado ya está disponible en la colección de filtros del gráfico, eliminará el filtro y realizará el filtrado relevante en los datos subyacentes. En resumen, el método de filtro alternará los filtros suministrados.
mychart.filter(10);Para eliminar todos los filtros, llame al método de filtro con nullvalor. El filtro puede ser cualquiera de los siguientes elementos:
null - Chart eliminará todos los filtros aplicados anteriormente.
single value - Chart llamará al método de filtro de Crossfilter subyacente y enviará el valor proporcionado.
dc.filters.RangedFilter- Acepta dos valores, bajo y alto. El gráfico filtrará todos los datos, excepto el valor en el rango entre el valor bajo y el alto.
dc.filters.TwoDimensionalFilter - Acepta valores bidimensionales que se utilizan en el mapa de calor.
dc.filters.RangedTwoDimensionalFilter - Es similar a dc.filters.RangedFilter, excepto que acepta un valor bidimensional que solo se usa en diagramas de dispersión.
hasFilter ([filtro])
Comprueba si el filtro suministrado está disponible o no en la tabla.
replaceFilter ([filtro])
Reemplaza el filtro actual del gráfico con el filtro suministrado.
filtros ()
Devuelve todos los filtros actuales asociados con el gráfico.
filterAll ()
Borra todos los filtros asociados con el gráfico.
filterHandler ([filterHandler])
Obtiene o establece una función de controlador de filtro. El gráfico utiliza la función de controlador de filtro para filtrar el conjunto de datos subyacente mediante el filtro. El gráfico tiene una función de controlador de filtro predeterminado y se puede reemplazar por una función de controlador de filtro personalizado utilizando este método. El controlador de filtro predeterminado es el siguiente:
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])
Obtiene o establece una función de controlador has-filter. El gráfico utiliza esta función para comprobar si un filtro está disponible en la colección de filtros del gráfico o no. El controlador de filtro predeterminado es el siguiente:
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])
Obtiene o establece la función de controlador de agregar filtros. El gráfico utiliza esta función para agregar el filtro a la colección de filtros del gráfico. El controlador de agregar filtro predeterminado es el siguiente:
chart.addFilterHandler(function (filters, filter) {
filters.push(filter);
return filters;
});removeFilterHandler ([removeFilterHandler])
Obtiene o establece la función de controlador de eliminación de filtros. El gráfico utiliza esta función para eliminar el filtro de la colección de filtros del gráfico. El filtro de eliminación predeterminado es el siguiente:
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])
Obtiene o establece la función de controlador de filtro de restablecimiento. El gráfico utiliza esta función para restablecer la colección de filtros del gráfico. El filtro de reinicio predeterminado es el siguiente:
function (filters) {
return [];
}filterPrinter ([filterPrinterFunction])
Obtiene o establece la función de filtro de impresora. El gráfico utiliza esta función para imprimir la información del filtro.
commitHandler ()
Obtiene o establece el controlador de confirmación. El propósito del controlador de confirmación es enviar los datos filtrados al servidor de forma asincrónica.
Opciones de eventos
DC.js define un conjunto limitado de eventos para realizar algunas funcionalidades como Filtrado, Zoom, etc. La lista de eventos definidos en DC.js es la siguiente:
renderlet - Se activa después de que se vuelven a dibujar y renderizar las transiciones.
pretransition - Despedido antes de que comiencen las transiciones.
preRender - Activado antes de la representación del gráfico.
postRender - Se activa después de que el gráfico termina de renderizarse, incluida toda la lógica del renderlet.
preRedraw - Disparado antes de redibujar el gráfico.
postRedraw - Se activa después de que el gráfico termina de redibujarse, incluida toda la lógica del renderlet.
filtered - Se dispara después de aplicar, agregar o quitar un filtro.
zoomed - Se dispara después de que se activa un zoom.
basicMixin proporciona un método, on(event, listener) para configurar la función de devolución de llamada para todos los eventos definidos anteriormente.
on(event, listener) - Establece la función de devolución de llamada o de escucha para el evento específico.
onClick(datum)- Se pasa a D3 como el controlador onClick para cada gráfico. El comportamiento predeterminado es filtrar por el dato seleccionado (pasado a la devolución de llamada) y volver a dibujar el grupo de gráficos.
Opciones de renderizado
BasicMixin proporciona una lista de métodos para representar los gráficos. Se utilizan para dibujar el gráfico y son los siguientes:
render()- Renderiza el gráfico. Generalmente, se usará primero, cuando se dibuje el gráfico.
renderGroup() - Representa todos los gráficos del grupo como pertenece este gráfico.
renderLabel( [renderLabel]) - Activa / desactiva la representación de etiquetas.
renderTitle( [renderTitle]) - Activa / desactiva la reproducción de títulos.
redraw() - Vuelve a dibujar todo el gráfico.
redrawGroup() - Vuelve a dibujar todos los gráficos del grupo al que pertenece este gráfico.
Opciones de transición
BasicMixin proporciona métodos para establecer el efecto de transición del gráfico y son los siguientes:
transitionDelay( [delay]) : Establece u obtiene el retardo de transición de la animación (en milisegundos) para esta instancia de gráfico.
transitionDuration( [duration]) : Establece u obtiene la duración de la transición de la animación (en milisegundos) para esta instancia de gráfico.
useViewBoxResizing( [useViewBoxResizing]) - Si está configurado, cambia el tamaño del gráfico según los atributos del cuadro de visualización SVG.
controlsUseVisibility( [controlsUseVisibility]) - si se establece, utiliza el atributo de visibilidad en lugar del atributo de visualización para mostrar / ocultar un restablecimiento de gráfico y controles de filtro.
En el próximo capítulo, entenderemos capMixin.