DC.js - baseMixin

更新于 2025/12/11 16:14:00

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]) − 设置数据回调并使我们能够获取底层图表的数据集。

// 获取所有组
mychart.data(function (group) {
    return group.all();
});

// 获取前五个组
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])

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

mychart.filter(10);

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

null − Chart 将删除之前应用的所有过滤器。
单个值 − Chart 将调用底层 Crossfilter 的过滤器方法并发送提供的值。
dc.filters.RangedFilter − 它接受两个值，低和高。Chart 将过滤掉所有数据，除了低值和高值之间的范围内的值。
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) {
    
        // 空的情况(无过滤)
        dimension.filter(null);
    } else if (filters.length === 1 && !filters[0].isFiltered) {
        
        // 单个值，而不是基于函数的过滤器
        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])

获取或设置删除过滤器处理程序函数。此函数由图表用于将过滤器从图表的过滤器集合中删除。默认的删除过滤器如下 −

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 − 在图表完成渲染(包括所有 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 viewbox 属性调整图表大小。
controlsUseVisibility( [controlsUseVisibility]) − 如果设置，则使用visibility属性而不是display属性来显示/隐藏图表重置和过滤控件。

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

❮ DC.js Mixins DC.js capMixin ❯

DC.js 教程

DC.js 有用资源