DC.js - baseMixin( baseMixin)

baseMixin提供创建任何类型图表所需的基本方法。范围从设置图表的宽度到图表的高级过滤。

一般图表选项

basicMixin提供了许多图表方法来获取/设置图表的属性。它们如下，

chartID() - 返回图表的内部数字ID。
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]) - 返回图表的SVGE元素。
resetSvg() - 重置DOM中的SVG容器。
root( [rootElement]) - 获取图表的根容器。

数据选项

basicMixin提供了为图表设置数据的方法。数据设置为Crossfilter维度和组。此外，它还提供了获取基础数据集的选项。

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( [filter])

获取或设置图表的过滤器。如果提供的过滤器是新的，则它将添加到图表的过滤器集合中并应用于基础数据集。如果提供的过滤器已在图表的过滤器集合中可用，则它将删除过滤器并对基础数据执行相关过滤。简而言之，过滤方法将切换提供的过滤器。

mychart.filter(10);

要删除所有过滤器，请使用null值调用filter方法。过滤器可以是以下任何一项 -

null - 图表将删除以前应用的所有过滤器。
single value - 图表将调用底层Crossfilter的过滤方法并发送提供的值。
dc.filters.RangedFilter - 它接受两个值，低和高。图表将过滤掉所有数据，但低值和高值之间的值除外。
dc.filters.TwoDimensionalFilter - 它接受热图中使用的二维值。
dc.filters.RangedTwoDimensionalFilter - 它类似于dc.filters.RangedFilter，不同之处在于它接受仅在散点图中使用的二维值。

hasFilter( [filter])

检查图表中是否提供了提供的过滤器。

replaceFilter( [filter])

用提供的过滤器替换图表的当前过滤器。

filters()

返回与图表关联的所有当前过滤器。

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])

获取或设置add-filter处理函数。图表使用此函数将过滤器添加到图表的过滤器集合中。默认的添加过滤器处理程序如下 -

chart.addFilterHandler(function (filters, filter) {
   filters.push(filter);
   return filters;
});

removeFilterHandler( [removeFilterHandler])

获取或设置remove-filter处理函数。图表使用此函数从图表的过滤器集合中删除过滤器。默认的删除过滤器如下 -

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])

获取或设置reset-filter处理函数。图表使用此功能重置图表的过滤器集合。默认的重置过滤器如下 -

function (filters) {
   return [];
}

filterPrinter( [filterPrinterFunction])

获取或设置打印机过滤器功能。图表使用此功能打印过滤器信息。

commitHandler()

获取或设置提交处理程序。提交处理程序的目的是将过滤后的数据异步发送到服务器。

活动选项

DC.js定义了一组有限的事件来执行某些功能，例如过滤，缩放等.DC.js中定义的事件列表如下 -

renderlet - 重新绘制和渲染过渡后触发。
pretransition - 在转换开始之前触发。
preRender - 在图表渲染之前触发。
postRender - 在图表完成渲染后触发，包括所有渲染的逻辑。
preRedraw - 在图表重绘之前触发。
postRedraw - 在图表完成重绘后触发，包括所有renderlet的逻辑。
filtered - 在应用，添加或删除过滤器后触发。
zoomed - 触发缩放后触发。

basicMixin提供了一个on(event, listener)方法，用于为所有上面定义的事件设置回调函数。

on(event, listener) - 设置特定事件的回调或侦听器函数。
onClick(datum) - 它作为每个图表的onClick处理程序传递给D3。默认行为是过滤单击的数据（传递给回调）并重绘图表组。

渲染选项

basicMixin提供了呈现图表的方法列表。它们用于绘制图表，它们如下 -

render() - 渲染图表。通常，在绘制图表时首先使用它。
renderGroup() - 在此图表所属的情况下呈现组中的所有图表。
renderLabel( [renderLabel]) - 打开/关闭标签渲染。
renderTitle( [renderTitle]) - 打开/关闭标题渲染。
redraw() - 重绘整个图表。
redrawGroup() - 重绘该redrawGroup()表所属的组中的所有图表。

过渡期权

basicMixin提供了设置图表过渡效果的方法，它们如下 -

transitionDelay( [delay]) - 设置或获取此图表实例的动画转换延迟（以毫秒为单位）。
transitionDuration( [duration]) - 设置或获取此图表实例的动画转换持续时间（以毫秒为单位）。
useViewBoxResizing( [useViewBoxResizing]) - 如果设置，则根据SVG视图框属性调整图表大小。
controlsUseVisibility( [controlsUseVisibility]) - 如果设置，则使用visibility属性而不是display属性来显示/隐藏图表重置和过滤控件。

在下一章中，我们将了解capMixin。

<上一篇.DC.js - Mixins

DC.js - capMixin( capMixin).下一篇>

DC.js - 教程

DC.js - 介绍

DC.js - 安装

DC.js - 概念( Concepts)

Crossfilter简介(Introduction to Crossfilter)

D3.js简介(Introduction to D3.js)

DC.js - Mixins