Учебники

DC.js — baseMixin

Август 31, 2018

baseMixin предоставляет основные методы, необходимые для создания любого типа диаграммы. Он варьируется от установки ширины диаграммы до расширенной фильтрации диаграммы.

Общие параметры диаграммы

BasicMixin предоставляет множество методов диаграмм для получения / установки свойств диаграмм. Они заключаются в следующем,

  • chartID () — возвращает внутренний числовой идентификатор диаграммы.

  • chartGroup ([chartGroup]) — получает или задает группу, к которой принадлежит диаграмма. В DC.js диаграммы могут быть сгруппированы в один набор. Ожидается, что все диаграммы в группе будут использовать один и тот же набор данных Crossfilter. Они отображаются и перерисовываются одновременно.

chartID () — возвращает внутренний числовой идентификатор диаграммы.

chartGroup ([chartGroup]) — получает или задает группу, к которой принадлежит диаграмма. В DC.js диаграммы могут быть сгруппированы в один набор. Ожидается, что все диаграммы в группе будут использовать один и тот же набор данных Crossfilter. Они отображаются и перерисовываются одновременно. 

mychart.chartGroup('dashboard');

  • minWidth ([minWidth]) — устанавливает минимальную ширину диаграммы.

minWidth ([minWidth]) — устанавливает минимальную ширину диаграммы. 

mychart.minWidth(300);

  • ширина ([ширина]) — получает или задает ширину диаграммы.

ширина ([ширина]) — получает или задает ширину диаграммы. 

mychart.width(600);

  • minHeight ([minHeight]) — Получает или задает минимальную высоту диаграммы.

minHeight ([minHeight]) — Получает или задает минимальную высоту диаграммы. 

mychart.minHeight(300);

  • высота ([высота]) — получает или задает высоту диаграммы.

высота ([высота]) — получает или задает высоту диаграммы. 

mychart.height(300);

  • title ([titleFunction]) — Получает или задает функцию заголовка. Заголовок — это заголовок элемента SVG дочернего элемента на диаграмме (например, один столбец на столбчатой ​​диаграмме). Заголовок в диаграммах представлен в виде всплывающей подсказки в браузере.

title ([titleFunction]) — Получает или задает функцию заголовка. Заголовок — это заголовок элемента SVG дочернего элемента на диаграмме (например, один столбец на столбчатой ​​диаграмме). Заголовок в диаграммах представлен в виде всплывающей подсказки в браузере. 

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

  • label (labelFunction [??]) — аналогичен методу title (), но он устанавливает метку вместо заголовка.

label (labelFunction [??]) — аналогичен методу title (), но он устанавливает метку вместо заголовка. 

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

  • options (opts) — устанавливает любой параметр диаграммы, используя объект JavaScript. Каждый ключ представляет соответствующий метод, доступный в диаграммах, и соответствующий метод будет вызван с соответствующим значением.

options (opts) — устанавливает любой параметр диаграммы, используя объект JavaScript. Каждый ключ представляет соответствующий метод, доступный в диаграммах, и соответствующий метод будет вызван с соответствующим значением. 

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

Здесь, методы width () и height () будут запущены с указанным значением.

  • легенда ([легенда]) — прикрепляет легенду к графику. Легенда может быть создана с помощью метода d3.legend () .

легенда ([легенда]) — прикрепляет легенду к графику. Легенда может быть создана с помощью метода d3.legend () . 

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

  • anchor (parent [??]) — Устанавливает корневой SVGElement в качестве корня существующей диаграммы или любых допустимых одиночных селекторов D3. При желании группу диаграмм также можно задать с помощью второго аргумента.

  • anchorName () — получает идентификатор DOM привязанного местоположения диаграммы.

  • svg ([svgElement]) — возвращает SVGElement диаграммы.

  • resetSvg () — Сбрасывает контейнер SVG в DOM.

  • root ([rootElement]) — получает корневой контейнер диаграммы.

anchor (parent [??]) — Устанавливает корневой SVGElement в качестве корня существующей диаграммы или любых допустимых одиночных селекторов D3. При желании группу диаграмм также можно задать с помощью второго аргумента.

anchorName () — получает идентификатор DOM привязанного местоположения диаграммы.

svg ([svgElement]) — возвращает SVGElement диаграммы.

resetSvg () — Сбрасывает контейнер SVG в DOM.

root ([rootElement]) — получает корневой контейнер диаграммы.

Параметры данных

basicMixin предоставляет методы для установки данных для графиков. Данные задаются как измерение и группа Crossfilter. Кроме того, он предоставляет возможность получить базовый набор данных.

  • измерение ([размерность)) — Устанавливает или получает измерение диаграммы. Измерение — это любое допустимое измерение Crossfilter.

измерение ([размерность)) — Устанавливает или получает измерение диаграммы. Измерение — это любое допустимое измерение Crossfilter. 

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

  • группа (группа [??]) — Устанавливает или получает группу графика. Группа — это любая действительная группа Crossfilter. Группу можно назвать, используя второй аргумент, чтобы использовать ее позже в коде.

группа (группа [??]) — Устанавливает или получает группу графика. Группа — это любая действительная группа Crossfilter. Группу можно назвать, используя второй аргумент, чтобы использовать ее позже в коде. 

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

  • data ([callback]) — устанавливает обратный вызов данных и позволяет нам получить набор данных базовой диаграммы.

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 на линейной / столбчатой ​​диаграмме. По умолчанию функция доступа к клавишам выглядит следующим образом:

keyAccessor ([keyAccessor]) — получает или задает функцию доступа к ключу. Он используется для извлечения ключа из базовой группы Crossfilter. Ключ используется для срезов на круговой диаграмме и оси X на линейной / столбчатой ​​диаграмме. По умолчанию функция доступа к клавишам выглядит следующим образом: 

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

  • valueAccessor ([valueAccessor]) — получает или задает функцию доступа к значению. Он используется для получения значения из базовой группы Crossfilter. Это значение используется для размера среза на круговой диаграмме и положения оси Y на линейной / столбчатой ​​диаграмме. Функция доступа к значениям по умолчанию выглядит следующим образом:

valueAccessor ([valueAccessor]) — получает или задает функцию доступа к значению. Он используется для получения значения из базовой группы Crossfilter. Это значение используется для размера среза на круговой диаграмме и положения оси Y на линейной / столбчатой ​​диаграмме. Функция доступа к значениям по умолчанию выглядит следующим образом: 

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

  • ordering ([orderFunction]) — Получает или задает функцию упорядочения, чтобы упорядочить порядковый размер. По умолчанию диаграмма использует crossfilter.quicksort.by для сортировки элементов.

ordering ([orderFunction]) — Получает или задает функцию упорядочения, чтобы упорядочить порядковый размер. По умолчанию диаграмма использует crossfilter.quicksort.by для сортировки элементов. 

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

Параметры фильтра

Фильтрация является одним из основных моментов DC.js. Мы можем применить один или несколько фильтров непосредственно к объекту диаграммы, используя метод filter () и вызывая методы redrawGroup () или dc.redrawAll () диаграммы, чтобы увидеть эффект фильтрации на диаграмме. По умолчанию объект диаграммы принимает один или несколько фильтров с использованием метода filter (), применяет его к базовому набору данных Crossfilter (), получает отфильтрованные данные из Crossfilter и перерисовывает диаграммы с использованием отфильтрованных данных. DC.js предоставляет следующие методы для обработки фильтрации в диаграмме.

Фильтр ([фильтр])

Получает или задает фильтр для диаграммы. Если предоставленный фильтр новый, он будет добавлен в коллекцию фильтров диаграммы и применен к базовому набору данных. Если предоставленный фильтр уже доступен в коллекции фильтров диаграммы, он удалит фильтр и выполнит соответствующую фильтрацию базовых данных. Короче говоря, метод фильтра будет переключать предоставленные фильтры. 

mychart.filter(10);

Чтобы удалить все фильтры, вызовите метод фильтра с нулевым значением. Фильтр может быть любым из следующих элементов:

  • null — Chart удалит все ранее примененные фильтры.

  • одиночное значение — Chart вызовет базовый метод фильтра Crossfilter и отправит предоставленное значение.

  • dc.filters.RangedFilter — принимает два значения: низкое и высокое. Диаграмма отфильтрует все данные, кроме значения в диапазоне от низкого до высокого значения.

  • dc.filters.TwoDimensionalFilter — принимает двумерные значения, которые используются в тепловой карте.

  • dc.filters.RangedTwoDimensionalFilter — аналогичен dc.filters.RangedFilter, за исключением того, что он принимает двумерное значение, используемое только на точечных диаграммах.

null — Chart удалит все ранее примененные фильтры.

одиночное значение — Chart вызовет базовый метод фильтра Crossfilter и отправит предоставленное значение.

dc.filters.RangedFilter — принимает два значения: низкое и высокое. Диаграмма отфильтрует все данные, кроме значения в диапазоне от низкого до высокого значения.

dc.filters.TwoDimensionalFilter — принимает двумерные значения, которые используются в тепловой карте.

dc.filters.RangedTwoDimensionalFilter — аналогичен dc.filters.RangedFilter, за исключением того, что он принимает двумерное значение, используемое только на точечных диаграммах.

hasFilter ([фильтр])

Проверяет, доступен ли поставляемый фильтр на графике.

replaceFilter ([фильтр])

Заменяет текущий фильтр графика поставляемым фильтром.

фильтры ()

Возвращает все текущие фильтры, связанные с диаграммой.

filterAll ()

Очищает все фильтры, связанные с диаграммой.

filterHandler ([filterHandler])

Получает или задает функцию обработчика фильтра. Функция обработчика фильтра используется диаграммой для фильтрации базового набора данных с использованием фильтра. Диаграмма имеет функцию обработчика фильтра по умолчанию, и этот метод может быть заменен пользовательской функцией обработчика фильтра. Обработчик фильтра по умолчанию выглядит следующим образом: 

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 — запускается после того, как диаграмма завершает перерисовку, включая всю логику рендлета.

  • фильтр — запускается после применения, добавления или удаления фильтра.

  • ZOOMED — срабатывает после срабатывания зума.

renderlet — запускается после перерисовки и визуализации переходов.

pretransition — срабатывает перед началом переходов.

preRender — срабатывает перед рендерингом графика.

postRender — запускается после того, как график завершает рендеринг, включая всю логику рендлета.

preRedraw — запускается перед перерисовкой графика.

postRedraw — запускается после того, как диаграмма завершает перерисовку, включая всю логику рендлета.

фильтр — запускается после применения, добавления или удаления фильтра.

ZOOMED — срабатывает после срабатывания зума.

basicMixin предоставляет метод on (event, listener) для установки функции обратного вызова для всех определенных выше событий.

  • on (событие, слушатель) — устанавливает функцию обратного вызова или функцию прослушивания для конкретного события.

  • onClick (datum) — он передается в D3 как обработчик onClick для каждого графика. Поведение по умолчанию состоит в том, чтобы фильтровать данные по выбранной точке (переданные в функцию обратного вызова) и перерисовывать группу диаграмм.

on (событие, слушатель) — устанавливает функцию обратного вызова или функцию прослушивания для конкретного события.

onClick (datum) — он передается в D3 как обработчик onClick для каждого графика. Поведение по умолчанию состоит в том, чтобы фильтровать данные по выбранной точке (переданные в функцию обратного вызова) и перерисовывать группу диаграмм.

Параметры рендеринга

BasicMixin предоставляет список методов для визуализации диаграмм. Они используются для рисования графика, и они следующие:

  • render () — отображает график. Как правило, он будет использован первым, когда будет нарисован график.

  • renderGroup () — отображает все диаграммы в группе, к которым принадлежит этот график.

  • renderLabel ([renderLabel]) — включает / выключает рендеринг надписей .

  • renderTitle ([renderTitle]) — включает / выключает рендеринг заголовка.

  • redraw () — перерисовывает весь график.

  • redrawGroup () — перерисовывает все диаграммы в группе, поскольку эта диаграмма принадлежит.

render () — отображает график. Как правило, он будет использован первым, когда будет нарисован график.

renderGroup () — отображает все диаграммы в группе, к которым принадлежит этот график.

renderLabel ([renderLabel]) — включает / выключает рендеринг надписей .

renderTitle ([renderTitle]) — включает / выключает рендеринг заголовка.

redraw () — перерисовывает весь график.

redrawGroup () — перерисовывает все диаграммы в группе, поскольку эта диаграмма принадлежит.

Варианты перехода

BasicMixin предоставляет методы для установки эффекта перехода диаграммы, и они следующие:

  • transitionDelay ([delay]) — Устанавливает или получает задержку перехода анимации (в миллисекундах) для этого экземпляра диаграммы.

  • transitionDuration ([duration]) — Устанавливает или получает длительность перехода анимации (в миллисекундах) для этого экземпляра диаграммы.

  • useViewBoxResizing ([useViewBoxResizing]) — если установлено, изменяет размеры диаграммы в соответствии с атрибутами SVG viewbox.

  • controlsUseVisibility ([controlsUseVisibility]) — если установлено, использует атрибут видимости вместо атрибута отображения, чтобы показать / скрыть сброс диаграммы и элементы управления фильтра.

transitionDelay ([delay]) — Устанавливает или получает задержку перехода анимации (в миллисекундах) для этого экземпляра диаграммы.

transitionDuration ([duration]) — Устанавливает или получает длительность перехода анимации (в миллисекундах) для этого экземпляра диаграммы.

useViewBoxResizing ([useViewBoxResizing]) — если установлено, изменяет размеры диаграммы в соответствии с атрибутами SVG viewbox.

controlsUseVisibility ([controlsUseVisibility]) — если установлено, использует атрибут видимости вместо атрибута отображения, чтобы показать / скрыть сброс диаграммы и элементы управления фильтра.

В следующей главе мы разберемся с capMixin.

47
Share: