DC.js - baseMixin
baseMixinbietet grundlegende Methoden zum Erstellen eines beliebigen Diagrammtyps. Es reicht von der Einstellung der Breite des Diagramms bis zur erweiterten Filterung des Diagramms.
Allgemeine Diagrammoptionen
Das basicMixinbietet viele Diagrammmethoden zum Abrufen / Festlegen der Eigenschaften der Diagramme. Sie sind wie folgt,
chartID() - Gibt die interne numerische ID des Diagramms zurück.
chartGroup( [chartGroup])- Ruft die Gruppe ab, zu der das Diagramm gehört, oder legt diese fest. In DC.js können Diagramme zu einem einzigen Satz zusammengefasst werden. Es wird erwartet, dass alle Diagramme in einer Gruppe denselben Crossfilter-Datensatz verwenden. Sie werden gleichzeitig gerendert und neu gezeichnet.
mychart.chartGroup('dashboard');minWidth( [minWidth]) - Legt die Mindestbreite des Diagramms fest.
mychart.minWidth(300);width( [width]) - Ruft die Breite des Diagramms ab oder legt diese fest.
mychart.width(600);minHeight( [minHeight]) - Ruft die Mindesthöhe des Diagramms ab oder legt diese fest.
mychart.minHeight(300);height( [height]) - Ruft die Höhe des Diagramms ab oder legt diese fest.
mychart.height(300);title( [titleFunction])- Ruft die Titelfunktion ab oder legt diese fest. Titel ist der Titel des SVG-Elements des untergeordneten Elements im Diagramm (z. B. ein einzelner Balken in einem Balkendiagramm). Titel in den Diagrammen werden im Browser als Tooltip dargestellt.
mychart.title(function(data) {
return d.key + ': ' + d.value;
});label( labelFunction[??]) - Ähnlich wie bei der title () -Methode, jedoch wird die Bezeichnung anstelle des Titels festgelegt.
mychart.label(function(data) {
return d.key + ': ' + d.value;
});options(opts)- Legt eine beliebige Diagrammoption mithilfe des JavaScript-Objekts fest. Jeder Schlüssel stellt die entsprechende in den Diagrammen verfügbare Methode dar und die übereinstimmende Methode wird mit dem entsprechenden Wert aufgerufen.
mychart.options ({
'width' : 300,
'height' : 300
});Hier werden die Methoden width () und height () mit dem angegebenen Wert ausgelöst.
legend( [legend])- Fügt dem Diagramm eine Legende hinzu. Die Legende kann mit dem erstellt werdend3.legend() Methode.
mychart.legend (
dc.legend()
.x(500)
.y(50)
.itemHeight(12)
.gap(4))anchor( parent[??])- Legt fest, dass das Root-SVGElement entweder das Root eines vorhandenen Diagramms oder ein gültiger D3-Einzelselektor ist. Optional kann die Diagrammgruppe auch mit dem zweiten Argument festgelegt werden.
anchorName() - Ruft die DOM-ID der verankerten Position des Diagramms ab.
svg( [svgElement]) - Gibt das SVGElement des Diagramms zurück.
resetSvg() - Setzt den SVG-Container im DOM zurück.
root( [rootElement]) - Ruft den Stammcontainer des Diagramms ab.
Datenoptionen
basicMixinbietet Methoden zum Festlegen der Daten für die Diagramme. Die Daten werden als Crossfilter-Dimension und -Gruppe festgelegt. Darüber hinaus bietet es eine Option zum Abrufen des zugrunde liegenden Datasets.
dimension( [dimension])- Legt die Dimension des Diagramms fest oder ruft sie ab. Eine Dimension ist eine gültige Crossfilter-Dimension.
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);group( group[??])- Legt die Gruppe des Diagramms fest oder ruft sie ab. Eine Gruppe ist eine gültige Crossfilter-Gruppe. Die Gruppe kann mit dem zweiten Argument benannt werden, um sie später im Code zu verwenden.
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));data( [callback]) - Legt den Datenrückruf fest und ermöglicht es uns, den Datensatz des zugrunde liegenden Diagramms abzurufen.
// get all groups
mychart.data(function (group) {
return group.all();
});
// get top five groups
mychart.data(function (group) {
return group.top(5);
});keyAccessor( [keyAccessor])- Ruft die Key Accessor-Funktion ab oder legt diese fest. Es wird verwendet, um den Schlüssel aus der zugrunde liegenden Crossfilter-Gruppe abzurufen. Die Taste wird für Slices in einem Kreisdiagramm und für die x-Achse im Linien- / Balkendiagramm verwendet. Der Standardkey accessor Funktion ist wie folgt -
chart.keyAccessor(function(d) { return d.key; });valueAccessor( [valueAccessor])- Ruft die Wertzugriffsfunktion ab oder legt diese fest. Es wird verwendet, um den Wert aus der zugrunde liegenden Crossfilter-Gruppe abzurufen. Der Wert wird für die Schnittgröße im Kreisdiagramm und die Position der y-Achse im Linien- / Balkendiagramm verwendet. Der Standardvalue accessor Funktion ist wie folgt -
chart.valueAccessor(function(d) { return d.value; });ordering( [orderFunction])- Ruft eine Ordnungsfunktion ab oder legt diese fest, um die Ordnungsdimension zu ordnen. Standardmäßig wird ein Diagramm verwendetcrossfilter.quicksort.by um die Elemente zu sortieren.
_chart.ordering(dc.pluck('key'));Filteroptionen
Das Filtern ist eines der Highlights von DC.js. Wir können einen oder mehrere Filter mithilfe der filter () -Methode direkt auf das Diagrammobjekt anwenden und die redrawGroup () - oder dc.redrawAll () -Methode des Diagramms aufrufen, um den Filtereffekt auf das Diagramm zu sehen. Standardmäßig verwendet ein Diagrammobjekt einen oder mehrere Filter mithilfe der filter () -Methode, wendet sie auf den zugrunde liegenden Crossfilter () -Datensatz an, ruft die gefilterten Daten aus dem Crossfilter ab und zeichnet die Diagramme mithilfe der gefilterten Daten neu. DC.js bietet die folgenden Methoden zum Behandeln der Filterung im Diagramm.
Filter ([Filter])
Ruft den Filter für das Diagramm ab oder legt diesen fest. Wenn ein bereitgestellter Filter neu ist, wird er zur Filtersammlung des Diagramms hinzugefügt und auf das zugrunde liegende Dataset angewendet. Wenn der bereitgestellte Filter bereits in der Filtersammlung des Diagramms verfügbar ist, wird der Filter entfernt und die entsprechende Filterung für die zugrunde liegenden Daten durchgeführt. Kurz gesagt, die Filtermethode schaltet die mitgelieferten Filter um.
mychart.filter(10);Rufen Sie die Filtermethode mit auf, um alle Filter zu entfernen nullWert. Der Filter kann eines der folgenden Elemente sein:
null - Diagramm entfernt alle zuvor angewendeten Filter.
single value - Chart ruft die Filtermethode des zugrunde liegenden Crossfilters auf und sendet den angegebenen Wert.
dc.filters.RangedFilter- Es werden zwei Werte akzeptiert, niedrig und hoch. Das Diagramm filtert alle Daten mit Ausnahme des Werts im Bereich zwischen niedrigem und hohem Wert heraus.
dc.filters.TwoDimensionalFilter - Es akzeptiert zweidimensionale Werte, die in der Wärmekarte verwendet werden.
dc.filters.RangedTwoDimensionalFilter - Es ähnelt dem dc.filters.RangedFilter, akzeptiert jedoch einen zweidimensionalen Wert, der nur in Streudiagrammen verwendet wird.
hasFilter ([Filter])
Überprüft, ob der mitgelieferte Filter in der Tabelle verfügbar ist oder nicht.
replaceFilter ([Filter])
Ersetzt den aktuellen Filter des Diagramms durch den mitgelieferten Filter.
Filter ()
Gibt alle aktuellen Filter zurück, die dem Diagramm zugeordnet sind.
filterAll ()
Löscht alle mit dem Diagramm verknüpften Filter.
filterHandler ([filterHandler])
Ruft eine Filterhandlerfunktion ab oder legt diese fest. Die Filterhandlerfunktion wird vom Diagramm verwendet, um das zugrunde liegende Dataset mithilfe des Filters zu filtern. Das Diagramm verfügt über eine Standardfilterhandlerfunktion und kann mit dieser Methode durch eine benutzerdefinierte Filterhandlerfunktion ersetzt werden. Der Standardfilter-Handler lautet wie folgt:
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])
Ruft eine Has-Filter-Handler-Funktion ab oder legt diese fest. Diese Funktion wird vom Diagramm verwendet, um zu überprüfen, ob ein Filter in der Filtersammlung des Diagramms verfügbar ist oder nicht. Der Standard-Has-Filter-Handler lautet wie folgt:
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])
Ruft die Add-Filter-Handler-Funktion ab oder legt diese fest. Diese Funktion wird vom Diagramm verwendet, um den Filter zur Filtersammlung des Diagramms hinzuzufügen. Der Standard-Add-Filter-Handler lautet wie folgt:
chart.addFilterHandler(function (filters, filter) {
filters.push(filter);
return filters;
});removeFilterHandler ([removeFilterHandler])
Ruft die Funktion zum Entfernen des Filterhandlers ab oder legt diese fest. Diese Funktion wird vom Diagramm verwendet, um den Filter aus der Filtersammlung des Diagramms zu entfernen. Der Standard-Entfernungsfilter lautet wie folgt:
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])
Ruft die Reset-Filter-Handler-Funktion ab oder legt diese fest. Diese Funktion wird vom Diagramm verwendet, um die Filtersammlung des Diagramms zurückzusetzen. Der Standard-Reset-Filter lautet wie folgt:
function (filters) {
return [];
}filterPrinter ([filterPrinterFunction])
Ruft die Druckerfilterfunktion ab oder legt diese fest. Diese Funktion wird vom Diagramm zum Drucken der Filterinformationen verwendet.
commitHandler ()
Ruft den Commit-Handler ab oder legt diesen fest. Der Commit-Handler dient dazu, die gefilterten Daten asynchron an den Server zu senden.
Ereignisoptionen
DC.js definiert eine begrenzte Anzahl von Ereignissen, um einige Funktionen wie Filtern, Zoomen usw. auszuführen. Die Liste der in DC.js definierten Ereignisse lautet wie folgt:
renderlet - Wird ausgelöst, nachdem Übergänge neu gezeichnet und gerendert wurden.
pretransition - Wird ausgelöst, bevor die Übergänge beginnen.
preRender - Wird vor dem Rendern des Diagramms ausgelöst.
postRender - Wird ausgelöst, nachdem das Diagramm das Rendern abgeschlossen hat, einschließlich der gesamten Logik des Renderlets.
preRedraw - Wird vor dem erneuten Zeichnen des Diagramms ausgelöst.
postRedraw - Wird ausgelöst, nachdem das Diagramm vollständig neu gezeichnet wurde, einschließlich der gesamten Logik des Renderlets.
filtered - Wird ausgelöst, nachdem ein Filter angewendet, hinzugefügt oder entfernt wurde.
zoomed - Wird ausgelöst, nachdem ein Zoom ausgelöst wurde.
basicMixin bietet eine Methode, on(event, listener) um die Rückruffunktion für alle oben definierten Ereignisse einzustellen.
on(event, listener) - Legt die Rückruf- oder Listener-Funktion für das jeweilige Ereignis fest.
onClick(datum)- Es wird als onClick-Handler für jedes Diagramm an D3 übergeben. Standardmäßig wird nach dem angeklickten Datum gefiltert (an den Rückruf übergeben) und die Diagrammgruppe neu gezeichnet.
Rendering-Optionen
Das basicMixin bietet eine Liste von Methoden zum Rendern der Diagramme. Sie werden zum Zeichnen des Diagramms verwendet und lauten wie folgt:
render()- Rendert das Diagramm. Im Allgemeinen wird es zuerst verwendet, wenn das Diagramm gezeichnet wird.
renderGroup() - Rendert alle Diagramme in der Gruppe so, wie dieses Diagramm gehört.
renderLabel( [renderLabel]) - Aktiviert / deaktiviert das Rendern von Etiketten.
renderTitle( [renderTitle]) - Aktiviert / deaktiviert das Rendern von Titeln.
redraw() - Zeichnet das gesamte Diagramm neu.
redrawGroup() - Zeichnet alle Diagramme in der Gruppe neu, so wie dieses Diagramm gehört.
Übergangsoptionen
Das basicMixin bietet Methoden zum Festlegen des Übergangseffekts des Diagramms. Diese lauten wie folgt:
transitionDelay( [delay]) - Legt die Animationsübergangsverzögerung (in Millisekunden) für diese Diagramminstanz fest oder ruft sie ab.
transitionDuration( [duration]) - Legt die Animationsübergangsdauer (in Millisekunden) für diese Diagramminstanz fest oder ruft sie ab.
useViewBoxResizing( [useViewBoxResizing]) - Wenn diese Option festgelegt ist, wird die Größe des Diagramms gemäß den SVG-Ansichtsfeldattributen geändert.
controlsUseVisibility( [controlsUseVisibility]) - Wenn diese Option aktiviert ist, wird anstelle des Anzeigeattributs das Sichtbarkeitsattribut verwendet, um ein Diagramm zurückzusetzen / auszublenden und Steuerelemente zu filtern.
Im nächsten Kapitel werden wir capMixin verstehen.