DC.js - baseMixin
baseMixinfournit les méthodes de base nécessaires pour créer tout type de graphique. Cela va de la définition de la largeur du graphique au filtrage avancé du graphique.
Options générales du graphique
le basicMixinfournit de nombreuses méthodes de graphique pour obtenir / définir les propriétés des graphiques. Ils sont comme suit,
chartID() - Renvoie l'ID numérique interne du graphique.
chartGroup( [chartGroup])- Obtient ou définit le groupe auquel appartient le graphique. Dans DC.js, les graphiques peuvent être regroupés en un seul ensemble. Tous les graphiques d'un groupe doivent partager le même jeu de données Crossfilter. Ils sont rendus et redessinés simultanément.
mychart.chartGroup('dashboard');minWidth( [minWidth]) - Définit la largeur minimale du graphique.
mychart.minWidth(300);width( [width]) - Obtient ou définit la largeur du graphique.
mychart.width(600);minHeight( [minHeight]) - Obtient ou définit la hauteur minimale du graphique.
mychart.minHeight(300);height( [height]) - Obtient ou définit la hauteur du graphique.
mychart.height(300);title( [titleFunction])- Obtient ou définit la fonction de titre. Title est le titre de l'élément SVG de l'élément enfant dans le graphique (par exemple, une seule barre dans un graphique à barres). Le titre dans les graphiques est représenté par une info-bulle dans le navigateur.
mychart.title(function(data) {
return d.key + ': ' + d.value;
});label( labelFunction[??]) - Similaire à la méthode title (), mais elle définit le libellé au lieu du titre.
mychart.label(function(data) {
return d.key + ': ' + d.value;
});options(opts)- Définit n'importe quelle option de graphique à l'aide de l'objet JavaScript. Chaque clé représente la méthode correspondante disponible dans les graphiques et la méthode correspondante sera appelée avec la valeur appropriée.
mychart.options ({
'width' : 300,
'height' : 300
});Ici, les méthodes width () et height () seront déclenchées avec la valeur spécifiée.
legend( [legend])- Attache une légende au graphique. La légende peut être créée à l'aide dud3.legend() méthode.
mychart.legend (
dc.legend()
.x(500)
.y(50)
.itemHeight(12)
.gap(4))anchor( parent[??])- Définit le SVGElement racine comme étant la racine d'un graphique existant ou tout sélecteur unique D3 valide. Le cas échéant, le groupe de graphiques peut également être défini à l'aide du deuxième argument.
anchorName() - Obtient l'ID DOM de l'emplacement ancré du graphique.
svg( [svgElement]) - Renvoie le SVGElement du graphique.
resetSvg() - Réinitialise le conteneur SVG dans le DOM.
root( [rootElement]) - Obtient le conteneur racine du graphique.
Options de données
basicMixinfournit des méthodes pour définir les données des graphiques. Les données sont définies comme dimension et groupe Crossfilter. En outre, il fournit une option pour obtenir l'ensemble de données sous-jacent.
dimension( [dimension])- Définit ou obtient la dimension du graphique. Une dimension est une dimension Crossfilter valide.
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);group( group[??])- Définit ou récupère le groupe du graphique. Un groupe est un groupe Crossfilter valide. Le groupe peut être nommé à l'aide du deuxième argument pour l'utiliser plus tard dans le code.
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));data( [callback]) - Définit le rappel des données et nous permet d'obtenir l'ensemble de données du graphique sous-jacent.
// get all groups
mychart.data(function (group) {
return group.all();
});
// get top five groups
mychart.data(function (group) {
return group.top(5);
});keyAccessor( [keyAccessor])- Obtient ou définit la fonction d'accesseur de clé. Il est utilisé pour récupérer la clé du groupe Crossfilter sous-jacent. La clé est utilisée pour les tranches d'un graphique à secteurs et l'axe des x dans le graphique linéaire / à barres. Le défautkey accessor la fonction est la suivante -
chart.keyAccessor(function(d) { return d.key; });valueAccessor( [valueAccessor])- Obtient ou définit la fonction d'accesseur de valeur. Il est utilisé pour récupérer la valeur du groupe Crossfilter sous-jacent. La valeur est utilisée pour la taille de la tranche dans le graphique à secteurs et la position de l'axe y dans le graphique linéaire / à barres. Le défautvalue accessor la fonction est la suivante -
chart.valueAccessor(function(d) { return d.value; });ordering( [orderFunction])- Obtient ou définit une fonction de classement pour ordonner la dimension ordinale. Par défaut, un graphique utilisecrossfilter.quicksort.by pour trier les éléments.
_chart.ordering(dc.pluck('key'));Options de filtre
Le filtrage est l'un des points forts de DC.js. Nous pouvons appliquer un ou plusieurs filtres directement sur l'objet graphique à l'aide de la méthode filter () et appeler la méthode redrawGroup () ou dc.redrawAll () du graphique pour voir l'effet de filtrage sur le graphique. Par défaut, un objet de graphique prend un ou plusieurs filtres à l'aide de la méthode filter (), l'applique à l'ensemble de données Crossfilter () sous-jacent, obtient les données filtrées du Crossfilter et redessine les graphiques à l'aide des données filtrées. DC.js fournit les méthodes suivantes pour gérer le filtrage dans le graphique.
Filtre ([filtre])
Obtient ou définit le filtre du graphique. Si un filtre fourni est nouveau, il sera ajouté à la collection de filtres du graphique et appliqué à l'ensemble de données sous-jacent. Si le filtre fourni est déjà disponible dans la collection de filtres du graphique, il supprimera le filtre et effectuera le filtrage approprié sur les données sous-jacentes. En bref, la méthode de filtrage basculera les filtres fournis.
mychart.filter(10);Pour supprimer tous les filtres, appelez la méthode filter avec nullvaleur. Le filtre peut être l'un des éléments suivants -
null - Le graphique supprimera tous les filtres précédemment appliqués.
single value - Chart appellera la méthode de filtrage du Crossfilter sous-jacent et enverra la valeur fournie.
dc.filters.RangedFilter- Il accepte deux valeurs, basse et haute. Le graphique filtrera toutes les données, à l'exception de la valeur comprise entre la valeur basse et la valeur élevée.
dc.filters.TwoDimensionalFilter - Il accepte les valeurs bidimensionnelles utilisées dans la carte thermique.
dc.filters.RangedTwoDimensionalFilter - Il est similaire à dc.filters.RangedFilter, sauf qu'il accepte une valeur bidimensionnelle uniquement utilisée dans les nuages de points.
hasFilter ([filtre])
Vérifie si le filtre fourni est disponible ou non dans le tableau.
replaceFilter ([filtre])
Remplace le filtre actuel du graphique par le filtre fourni.
filtres ()
Renvoie tous les filtres actuels associés au graphique.
filterAll ()
Efface tous les filtres associés au graphique.
filterHandler ([filterHandler])
Obtient ou définit une fonction de gestionnaire de filtre. La fonction de gestionnaire de filtre est utilisée par le graphique pour filtrer l'ensemble de données sous-jacent à l'aide du filtre. Le graphique a une fonction de gestionnaire de filtre par défaut et il peut être remplacé par une fonction de gestionnaire de filtre personnalisé à l'aide de cette méthode. Le gestionnaire de filtre par défaut est le suivant -
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])
Obtient ou définit une fonction de gestionnaire has-filter. Cette fonction est utilisée par le graphique pour vérifier si un filtre est disponible dans la collection de filtres du graphique ou non. Le gestionnaire has-filter par défaut est le suivant -
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])
Obtient ou définit la fonction de gestionnaire d'ajout de filtre. Cette fonction est utilisée par le graphique pour ajouter le filtre dans la collection de filtres du graphique. Le gestionnaire d'ajout de filtre par défaut est le suivant -
chart.addFilterHandler(function (filters, filter) {
filters.push(filter);
return filters;
});removeFilterHandler ([removeFilterHandler])
Obtient ou définit la fonction de gestionnaire remove-filter. Cette fonction est utilisée par le graphique pour supprimer le filtre de la collection de filtres du graphique. Le filtre de suppression par défaut est le suivant -
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])
Obtient ou définit la fonction de gestionnaire de réinitialisation du filtre. Cette fonction est utilisée par le graphique pour réinitialiser la collection de filtres du graphique. Le filtre de réinitialisation par défaut est le suivant -
function (filters) {
return [];
}filterPrinter ([filterPrinterFunction])
Obtient ou définit la fonction de filtre d'imprimante. Cette fonction est utilisée par le graphique pour imprimer les informations du filtre.
commitHandler ()
Obtient ou définit le gestionnaire de validation. Le but du gestionnaire de validation est d'envoyer les données filtrées au serveur de manière asynchrone.
Options d'événement
DC.js définit un ensemble limité d'événements pour effectuer certaines fonctionnalités telles que le filtrage, le zoom, etc. La liste des événements définis dans le DC.js est la suivante -
renderlet - Lancé après que les transitions sont redessinées et rendues.
pretransition - Tiré avant le début des transitions.
preRender - Tiré avant le rendu du graphique.
postRender - Lancé après la fin du rendu du graphique, y compris toute la logique du rendu.
preRedraw - Déclenché avant la mise à jour du graphique.
postRedraw - Lancé une fois que le graphique a fini de redessiner, y compris toute la logique du rendu.
filtered - Lancé après l'application, l'ajout ou la suppression d'un filtre.
zoomed - Déclenché après le déclenchement d'un zoom.
basicMixin fournit une méthode, on(event, listener) pour définir la fonction de rappel pour tous les événements définis ci-dessus.
on(event, listener) - Définit la fonction de rappel ou d'écoute pour l'événement spécifique.
onClick(datum)- Il est transmis à D3 en tant que gestionnaire onClick pour chaque graphique. Le comportement par défaut est de filtrer sur la donnée cliquée (passée au rappel) et de redessiner le groupe de graphiques.
Options de rendu
Le basicMixin fournit une liste de méthodes pour rendre les graphiques. Ils sont utilisés pour dessiner le graphique et ils sont les suivants -
render()- Rend le graphique. Généralement, il sera utilisé en premier lorsque le graphique est dessiné.
renderGroup() - Rend tous les graphiques du groupe auxquels appartient ce graphique.
renderLabel( [renderLabel]) - Active / désactive le rendu des étiquettes.
renderTitle( [renderTitle]) - Active / désactive le rendu du titre.
redraw() - Redessine le graphique entier.
redrawGroup() - Redessine tous les graphiques du groupe auxquels appartient ce graphique.
Options de transition
Le basicMixin fournit des méthodes pour définir l'effet de transition du graphique et elles sont les suivantes -
transitionDelay( [delay]) - Définit ou obtient le délai de transition de l'animation (en millisecondes) pour cette instance de graphique.
transitionDuration( [duration]) - Définit ou obtient la durée de transition de l'animation (en millisecondes) pour cette instance de graphique.
useViewBoxResizing( [useViewBoxResizing]) - Si défini, redimensionne le graphique en fonction des attributs de la zone de visualisation SVG.
controlsUseVisibility( [controlsUseVisibility]) - s'il est défini, utilise l'attribut de visibilité au lieu de l'attribut d'affichage pour afficher / masquer une réinitialisation de graphique et des contrôles de filtrage.
Dans le prochain chapitre, nous comprendrons capMixin.