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.