开发手册 欢迎您!
软件开发者资料库

DC.js - baseMixin

DC.js baseMixin - 从简单和简单的步骤学习DC.js,从基本到高级概念,包括简介,安装,概念,Crossfilter简介,D3.js简介,Mixins,baseMixin,capMixin,colorMixin,marginMixin,coordinateGridMixin饼图,线,酒吧,复合,系列,分散,气泡图,热图,数据计数,表,网格,图例,仪表板工作示例。

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

  • 身高([身高]) : 获取或设置图表的高度.

  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()方法将使用指定的值触发.

  • 图例([图例]) : 将图例附加到图表中.可以使用 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维度和组.此外,它还提供了获取基础数据集的选项.

  • 维度([维度]) : 设置或获取图表的尺寸.维度是任何有效的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()));

  • 数据([回调]) : 设置数据回调并使我们能够获取基础图表的数据集.

// get all groupsmychart.data(function (group) {    return group.all(); });// get top five groupsmychart.data(function (group) {    return group.top(5); });

  • keyAccessor([keyAccessor]) : 获取或设置键访问器函数.它用于从底层的Crossfilter组中检索密钥.该键用于饼图中的切片和线/条形图中的x轴.默认的密钥访问者功能如下 :

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

  • valueAccessor([valueAccessor]) : 获取或设置值访问器函数.它用于从底层的Crossfilter组中检索值.该值用于饼图中的切片大小和线/条形图中的y轴位置.默认的值访问者功能如下 :

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

  • 订购([orderFunction]) : 获取或设置订购函数以订购序数维度.默认情况下,图表使用 crossfilter.quicksort.by 对元素进行排序.

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

过滤器选项

过滤是DC.js的亮点之一.我们可以使用filter()方法直接在图表对象上应用一个或多个过滤器,并调用图表的redrawGroup()或dc.redrawAll()方法来查看图表上的过滤效果.默认情况下,图表对象使用filter()方法获取一个或多个过滤器,将其应用于基础Crossfilter()数据集,从Crossfilter获取过滤数据并使用过滤后的数据重新绘制图表. DC.js提供了以下方法来处理图表中的过滤.

过滤器([过滤器])

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

mychart.filter(10);

要删除所有过滤器,请使用 null 值调用过滤器方法.过滤器可以是以下任何一项 :

  • null : 图表将删除之前应用的所有过滤器.

  • 单值 :  Chart将调用底层Crossfilter的过滤方法并发送提供的值.

  • dc.filters.RangedFilter : 它接受两个值,低和高.图表将过滤掉所有数据,但低值和高值之间的值除外.

  • dc.filters.TwoDimensionalFilter  : 去;它接受热图中使用的二维值.

  • dc.filters.RangedTwoDimensionalFilter : 它与dc.filters.RangedFilter类似,只是它接受仅在散点图中使用的二维值.

hasFilter ([filter])

检查图表中提供的过滤器是否可用.

replaceFilter([filter])

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

filters()

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

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

获取或设置add-filter处理函数.图表使用此函数将过滤器添加到图表的过滤器集合中.默认的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])

获取或设置重置过滤器处理函数.图表使用此函数重置图表的过滤器集合.默认的重置过滤器如下 :

function (filters) {   return [];}

filterPrinter([filterPrinterFunction])

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

commitHandler()

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

事件选项

DC.js定义了一组有限的事件执行一些功能,如过滤,缩放等.在DC.js中定义的事件列表如下 :

  • renderlet : 重新转换并渲染过渡后触发.

  • pretransition : 在转换开始之前被触发.

  • preRender : 在图表渲染之前被触发.

  • postRender : 在图表完成渲染后触发,包括所有渲染的逻辑.

  • preRedraw : 在图表重绘之前被触发.

  • postRedraw : 在图表完成重绘后触发,包括所有渲染的逻辑.

  • 过滤 : 在应用,添加或删除过滤器后触发.

  • 缩放 : 触发缩放后触发.

basicMixin 提供方法, on(事件,监听器) )为所有上面定义的事件设置回调函数.

  • on(事件,听众) : 设置特定事件的回调或侦听器功能.

  • onClick(基准) : 它作为每个图表的onClick处理程序传递给D3.默认行为是过滤单击的数据(传递给回调)并重绘图表组.

渲染选项

basicMixin提供了一个呈现图表的方法列表.它们用于绘制图表,它们如下所示;

  • render()  : 去;渲染图表.通常,在绘制图表时将首先使用它.

  • renderGroup() : 在此图表所属的情况下渲染组中的所有图表.

  • renderLabel([renderLabel]) : 打开/关闭标签渲染.

  • renderTitle([renderTitle]) : 打开/关闭标题呈现.

  • redraw() : 重新绘制整个图表.

  • redrawGroup() : 如此图表所属,重绘组中的所有图表.

转换选项

basicMixin提供设置图表过渡效果的方法如下:

  • transitionDelay([延迟] ) : 设置或获取此图表实例的动画转换延迟(以毫秒为单位).

  • transitionDuration([duration]) : 设置或获取此图表实例的动画转换持续时间(以毫秒为单位).

  • useViewBoxResizing([useViewBoxResizing]) : 如果设置,请根据SVG视图框属性调整图表大小.

  • controlsUseVisibility([controlsUseVisibility]) : 如果设置,则使用visibility属性而不是display属性来显示/隐藏图表重置和过滤控件.

在下一章中,我们将了解capMixin.

F-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js">