📅 最后修改于: 2020-10-25 09:47:48 🧑 作者: Mango
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提供了为图表设置数据的方法。数据设置为交叉过滤器维度和组。另外，它提供了获取基础数据集的选项。
Dimensions（[dimension]） -设置或获取图表的尺寸。维度是任何有效的Crossfilter维度。
var mycrossfilter = crossfilter([]);
var ageDimension = mycrossfilter.dimension(dc.pluck('age'));
mychart.dimension(ageDimension);
group（group [??]） -设置或获取图表的组。组是任何有效的交叉过滤器组。可以使用第二个参数命名该组，以在代码的后面使用它。
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轴。默认的密钥访问器函数如下-
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提供了以下方法来处理图表中的过滤。
获取或设置图表的过滤器。如果提供的过滤器是新的，则它将被添加到图表的过滤器集合中并应用于基础数据集。如果提供的过滤器已经在图表的过滤器集合中可用，则它将删除该过滤器并对基础数据进行相关过滤。简而言之，过滤器方法将切换提供的过滤器。
mychart.filter(10);
要删除所有过滤器，请使用空值调用filter方法。筛选器可以是以下任何一项-
null-图表将删除以前应用的所有过滤器。
单个值-Chart将调用基础Crossfilter的filter方法并发送提供的值。
dc.filters.RangedFilter-它接受两个值，低和高。图表将过滤掉所有数据，但低值和高值之间的值除外。
dc.filters.TwoDimensionalFilter-它接受在热图中使用的二维值。
dc.filters.RangedTwoDimensionalFilter-类似于dc.filters.RangedFilter，不同之处在于它接受仅在散点图中使用的二维值。
检查图表中提供的过滤器是否可用。
用提供的过滤器替换图表的当前过滤器。
返回与图表关联的所有当前过滤器。
清除与图表关联的所有过滤器。
获取或设置过滤器处理函数。图表使用过滤器处理程序函数通过过滤器过滤基础数据集。图表具有默认过滤器处理程序功能，可以使用此方法将其替换为自定义过滤器处理程序功能。默认的过滤器处理程序如下-
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;
});
获取或设置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;
});
});
获取或设置添加过滤器处理函数。图表使用此函数将过滤器添加到图表的过滤器集合中。默认的添加过滤器处理程序如下-
chart.addFilterHandler(function (filters, filter) {
filters.push(filter);
return filters;
});
获取或设置remove-filter处理函数。图表使用此函数从图表的过滤器集合中删除过滤器。默认的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;
});
获取或设置reset-filter处理函数。图表使用此函数来重置图表的过滤器集合。默认的重置过滤器如下-
function (filters) {
return [];
}
获取或设置打印机过滤器函数。图表使用此函数来打印过滤器信息。
获取或设置提交处理程序。提交处理程序的目的是将过滤后的数据异步发送到服务器。
DC.js定义了一组有限的事件以执行某些功能，例如过滤，缩放等。DC.js中定义的事件列表如下-
renderlet-重新绘制和渲染过渡后触发。
预转换-在转换开始之前触发。
preRender-在图表渲染之前触发。
postRender-在图表完成渲染（包括所有renderlet的逻辑）后触发。
preRedraw-在图表重绘之前触发。
postRedraw-在图表完成重画（包括所有renderlet的逻辑）后触发。
过滤-应用，添加或删除过滤器后触发。
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]） -如果设置，则使用可见性属性而不是display属性来显示/隐藏图表重置和过滤控件。
在下一章中，我们将了解capMixin。