DC.js - baseMixin
baseMixinпредоставляет базовые методы, необходимые для создания любого типа диаграммы. Он варьируется от настройки ширины диаграммы до расширенной фильтрации диаграммы.
Общие параметры диаграммы
В basicMixinпредоставляет множество методов диаграммы для получения / установки свойств диаграмм. Они следующие:
chartID() - Возвращает внутренний числовой идентификатор диаграммы.
chartGroup( [chartGroup])- Получает или задает группу, к которой принадлежит диаграмма. В DC.js диаграммы можно сгруппировать в один набор. Ожидается, что все диаграммы в группе будут использовать один и тот же набор данных Crossfilter. Они визуализируются и перерисовываются одновременно.
mychart.chartGroup('dashboard');minWidth( [minWidth]) - Устанавливает минимальную ширину диаграммы.
mychart.minWidth(300);width( [width]) - Получает или задает ширину диаграммы.
mychart.width(600);minHeight( [minHeight]) - Получает или задает минимальную высоту диаграммы.
mychart.minHeight(300);height( [height]) - Получает или задает высоту диаграммы.
mychart.height(300);title( [titleFunction])- Получает или задает функцию заголовка. Заголовок - это заголовок SVG-элемента дочернего элемента в диаграмме (например, отдельная полоса на линейчатой диаграмме). Заголовок в диаграммах представлен в виде всплывающей подсказки в браузере.
mychart.title(function(data) {
return d.key + ': ' + d.value;
});label( labelFunction[??]) - Подобен методу title (), но устанавливает метку вместо заголовка.
mychart.label(function(data) {
return d.key + ': ' + d.value;
});options(opts)- Устанавливает любой параметр диаграммы с помощью объекта JavaScript. Каждый ключ представляет соответствующий метод, доступный в диаграммах, и соответствующий метод будет вызываться с соответствующим значением.
mychart.options ({
'width' : 300,
'height' : 300
});Здесь методы width () и height () будут запущены с указанным значением.
legend( [legend])- Добавляет легенду к диаграмме. Легенду можно создать с помощьюd3.legend() метод.
mychart.legend (
dc.legend()
.x(500)
.y(50)
.itemHeight(12)
.gap(4))anchor( parent[??])- Устанавливает корневой элемент SVGElement в качестве корня существующей диаграммы или любых допустимых отдельных селекторов D3. При желании группу диаграммы также можно задать с помощью второго аргумента.
anchorName() - Получает DOM ID привязанного местоположения диаграммы.
svg( [svgElement]) - Возвращает SVGElement диаграммы.
resetSvg() - Сбрасывает контейнер SVG в DOM.
root( [rootElement]) - Получает корневой контейнер диаграммы.
Параметры данных
basicMixinпредоставляет методы для установки данных для диаграмм. Данные задаются как измерение и группа кроссфильтра. Кроме того, он предоставляет возможность получить базовый набор данных.
dimension( [dimension])- Устанавливает или получает размер диаграммы. Измерение - это любое допустимое измерение Crossfilter.
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);group( group[??])- Устанавливает или получает группу диаграммы. Группа - это любая допустимая группа Crossfilter. Группе можно присвоить имя с помощью второго аргумента, чтобы использовать ее позже в коде.
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
mychart.group(ageDimension.group(crossfilter.reduceCount()));data( [callback]) - Устанавливает обратный вызов данных и позволяет нам получить набор данных базовой диаграммы.
// get all groups
mychart.data(function (group) {
return group.all();
});
// get top five groups
mychart.data(function (group) {
return group.top(5);
});keyAccessor( [keyAccessor])- Получает или задает функцию доступа к ключу. Он используется для получения ключа из базовой группы Crossfilter. Ключ используется для срезов круговой диаграммы и оси X на линейной / гистограмме. По умолчаниюkey accessor функция выглядит следующим образом -
chart.keyAccessor(function(d) { return d.key; });valueAccessor( [valueAccessor])- Получает или задает функцию доступа к значению. Он используется для получения значения из базовой группы Crossfilter. Значение используется для размера среза на круговой диаграмме и положения оси Y на линейной / гистограмме. По умолчаниюvalue accessor функция выглядит следующим образом -
chart.valueAccessor(function(d) { return d.value; });ordering( [orderFunction])- Получает или задает функцию упорядочивания для упорядочивания порядкового размера. По умолчанию диаграмма используетcrossfilter.quicksort.by для сортировки элементов.
_chart.ordering(dc.pluck('key'));Параметры фильтра
Фильтрация - одна из основных особенностей DC.js. Мы можем применить один или несколько фильтров непосредственно к объекту диаграммы, используя метод filter () и вызов метода redrawGroup () или dc.redrawAll () диаграммы, чтобы увидеть эффект фильтрации на диаграмме. По умолчанию объект диаграммы принимает один или несколько фильтров с помощью метода filter (), применяет его к базовому набору данных Crossfilter (), получает отфильтрованные данные из Crossfilter и перерисовывает диаграммы, используя отфильтрованные данные. DC.js предоставляет следующие методы для обработки фильтрации в диаграмме.
Фильтр ([фильтр])
Получает или задает фильтр для диаграммы. Если предоставленный фильтр является новым, он будет добавлен в коллекцию фильтров диаграммы и применен к базовому набору данных. Если предоставленный фильтр уже доступен в коллекции фильтров диаграммы, он удалит фильтр и выполнит соответствующую фильтрацию для базовых данных. Короче говоря, метод filter будет переключать поставляемые фильтры.
mychart.filter(10);Чтобы удалить все фильтры, вызовите метод filter с nullзначение. Фильтр может быть любым из следующих элементов -
null - Диаграмма удалит все ранее примененные фильтры.
single value - Chart вызовет базовый метод фильтрации Crossfilter и отправит предоставленное значение.
dc.filters.RangedFilter- Принимает два значения: низкое и высокое. Диаграмма отфильтрует все данные, кроме значения в диапазоне от низкого до высокого значения.
dc.filters.TwoDimensionalFilter - Он принимает двумерные значения, которые используются в тепловой карте.
dc.filters.RangedTwoDimensionalFilter - Он похож на dc.filters.RangedFilter, за исключением того, что он принимает двумерное значение, используемое только в точечных диаграммах.
hasFilter ([фильтр])
Проверяет, доступен ли поставляемый фильтр на диаграмме.
replaceFilter ([фильтр])
Заменяет текущий фильтр диаграммы поставляемым фильтром.
фильтры ()
Возвращает все текущие фильтры, связанные с диаграммой.
filterAll ()
Удаляет все фильтры, связанные с диаграммой.
filterHandler ([filterHandler])
Получает или задает функцию обработчика фильтра. Функция обработчика фильтра используется диаграммой для фильтрации базового набора данных с помощью фильтра. Chart имеет функцию обработчика фильтра по умолчанию, и с помощью этого метода ее можно заменить функцией обработчика настраиваемого фильтра. Обработчик фильтра по умолчанию выглядит следующим образом -
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])
Получает или задает функцию-обработчик has-filter. Эта функция используется диаграммой, чтобы проверить, доступен ли фильтр в коллекции фильтров диаграммы. Обработчик has-filter по умолчанию выглядит следующим образом:
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])
Получает или задает функцию обработчика фильтра добавления. Эта функция используется диаграммой для добавления фильтра в коллекцию фильтров диаграммы. Обработчик добавления фильтра по умолчанию выглядит следующим образом:
chart.addFilterHandler(function (filters, filter) {
filters.push(filter);
return filters;
});removeFilterHandler ([removeFilterHandler])
Получает или задает функцию обработчика удаления фильтра. Эта функция используется диаграммой для удаления фильтра из коллекции фильтров диаграммы. Фильтр удаления по умолчанию выглядит следующим образом:
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])
Получает или задает функцию обработчика сброса фильтра. Эта функция используется диаграммой для сброса коллекции фильтров диаграммы. Фильтр сброса по умолчанию выглядит следующим образом -
function (filters) {
return [];
}filterPrinter ([filterPrinterFunction])
Получает или задает функцию фильтра принтера. Эта функция используется диаграммой для печати информации о фильтре.
commitHandler ()
Получает или задает обработчик фиксации. Назначение обработчика фиксации - асинхронно отправлять отфильтрованные данные на сервер.
Опции событий
DC.js определяет ограниченный набор событий для выполнения некоторых функций, таких как фильтрация, масштабирование и т. Д. Список событий, определенных в DC.js, выглядит следующим образом:
renderlet - Запускается после перерисовки и рендеринга переходов.
pretransition - Сработал до начала переходов.
preRender - Запускается перед отрисовкой диаграммы.
postRender - Запускается после завершения рендеринга диаграммы, включая всю логику рендерлета.
preRedraw - Запускается перед перерисовкой графика.
postRedraw - Запускается после завершения перерисовки диаграммы, включая всю логику рендерлета.
filtered - Запускается после применения, добавления или удаления фильтра.
zoomed - Срабатывает после срабатывания зума.
basicMixin предоставляет метод, on(event, listener) чтобы установить функцию обратного вызова для всех указанных выше событий.
on(event, listener) - Устанавливает функцию обратного вызова или прослушивателя для конкретного события.
onClick(datum)- Он передается в D3 как обработчик onClick для каждого графика. По умолчанию выполняется фильтрация по выбранному элементу данных (переданному в обратный вызов) и перерисовка группы диаграммы.
Параметры рендеринга
BasicMixin предоставляет список методов для визуализации диаграмм. Они используются для рисования диаграммы, и они следующие:
render()- Отображает диаграмму. Как правило, он будет использоваться в первую очередь при отрисовке диаграммы.
renderGroup() - Отображает все диаграммы в группе, как эта диаграмма.
renderLabel( [renderLabel]) - Включает / выключает рендеринг этикеток.
renderTitle( [renderTitle]) - Включает / выключает рендеринг титров.
redraw() - Перерисовывает всю диаграмму.
redrawGroup() - Перерисовывает все диаграммы в группе, как эта диаграмма.
Параметры перехода
BasicMixin предоставляет методы для установки эффекта перехода диаграммы, и они следующие:
transitionDelay( [delay]) - Устанавливает или получает задержку перехода анимации (в миллисекундах) для этого экземпляра диаграммы.
transitionDuration( [duration]) - Устанавливает или получает продолжительность перехода анимации (в миллисекундах) для этого экземпляра диаграммы.
useViewBoxResizing( [useViewBoxResizing]) - Если установлено, изменяет размер диаграммы в соответствии с атрибутами окна просмотра SVG.
controlsUseVisibility( [controlsUseVisibility]) - если установлено, использует атрибут видимости вместо атрибута отображения, чтобы показать / скрыть сброс диаграммы и элементы управления фильтрами.
В следующей главе мы поймем capMixin.