教程 > dc.js 中文教程 > 阅读：43

dc.js basemixin——迹忆客-ag捕鱼王app官网

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]) - 返回图表的 svgelement。
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]) - 设置数据回调并使我们能够获取底层图表的数据集。 ```javascript // 获取所有组 mychart.data(function (group) { return group.all(); });

// 获得前五组 mychart.data(function (group) { return group.top(5); });

* **keyaccessor( [keyaccessor])** - 获取或设置密钥访问器函数。 它用于从底层 crossfilter 组中检索密钥。 该键用于饼图中的切片和折线/条形图中的 x 轴。 默认密钥访问器功能如下
```javascript
chart.keyaccessor(function(d) { return d.key; });

valueaccessor( [valueaccessor]) - 获取或设置值访问器函数。它用于从底层 crossfilter 组中检索值。该值用于饼图中的切片大小和折线/条形图中的 y 轴位置。默认值访问器函数如下
```
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 值调用过滤器方法。过滤器可以是以下任何一项

null - 图表将删除以前应用的所有过滤器。
单值 - 图表将调用底层交叉过滤器的过滤器方法并发送提供的值。
dc.filters.rangedfilter - 它接受两个值，low 和 high。图表将过滤掉所有数据，除了 low 值和 high 值之间的值。
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) {
      
      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') {
      
      // 单个基于范围的过滤器
      dimension.filterrange(filters[0]);
   } else {
      
      // 一组值，或一组过滤器对象
      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])

获取或设置删除过滤器处理函数。图表使用此函数从图表的过滤器集合中删除过滤器。默认的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])

获取或设置 printer-filter 功能。图表使用此功能 printer-filter 信息。

commithandler()

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

event 选项

dc.js 定义了一组有限的事件来完成一些功能，例如过滤、缩放等。dc.js 中定义的事件列表如下

renderlet - 在重新绘制和渲染转换后触发。
pretransition - 在转换开始之前触发。
prerender - 在图表渲染之前触发。
postrender - 在图表完成渲染后触发，包括所有 renderlet 的逻辑。
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() - 重绘该图表所属的组中的所有图表。

过渡选项

basicmixin 提供了设置图表过渡效果的方法，如下

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

在下一篇文章中，我们将了解 capmixin。

dc.js mixins 

ag捕鱼王app官网计算机编程教程

dc.js basemixin——迹忆客-ag捕鱼王app官网

一般图表选项

数据选项

过滤器选项

filter( [filter])

hasfilter( [filter])

replacefilter( [filter])

filters()

filterall()

filterhandler( [filterhandler])

hasfilterhandler( [hasfilterhandler])

addfilterhandler( [addfilterhandler])

removefilterhandler( [removefilterhandler])

resetfilterhandler( [resetfilterhandler])

filterprinter( [filterprinterfunction])

commithandler()

event 选项

渲染选项

过渡选项

查看笔记

dc.js basemixin——迹忆客-ag捕鱼王app官网

一般图表选项

数据选项

过滤器选项

filter( [filter])

hasfilter( [filter])

replacefilter( [filter])

filters()

filterall()

filterhandler( [filterhandler])

hasfilterhandler( [hasfilterhandler])

addfilterhandler( [addfilterhandler])

removefilterhandler( [removefilterhandler])

resetfilterhandler( [resetfilterhandler])

filterprinter( [filterprinterfunction])

commithandler()

event 选项

渲染选项

过渡选项

 查看笔记

查看笔记