如何调整 dc.js 和 crossfilter 的分箱？这是性能瓶颈吗？答案

【问题标题】：How do I tweak binning for dc.js and crossfilter? Is that the performance bottleneck?如何调整 dc.js 和 crossfilter 的分箱？这是性能瓶颈吗？
【发布时间】：2016-02-25 21:02:40
【问题描述】：

我正在尝试制作一个可以接收 csv 并构建仪表板的通用交叉过滤器。以下是工作示例：

但由于某种原因，航班数据缓慢且无响应。比较分析相同数据的这两个：

我认为这是因为直方图分箱过于详细，但我在 api 参考中找不到调整它的好方法。 @gordonwoodhull mentioned:

如果分箱是错误的，你真的想看看你设置交叉过滤器的方式 - dc.js 只是使用它给定的东西。

如何调整交叉过滤器的分箱？我试过弄乱xUnits、dimension和group四舍五入无济于事。

This is the problem code I suspect is slow/wrong:

    var dim = ndx.dimension(function (d) { return d[propName]; });

    if (isNumeric(data[0][propName])) {
        var theChart = dc.barChart("#" + chartId);

        var countGroup = dim.group().reduceCount();
        var minMax = d3.extent(data, function (d) { return +d[propName] });
        var min = +minMax[0];
        var max = +minMax[1];
        theChart
            .width(gfilter.width).height(gfilter.height)
            .dimension(dim)
            .group(countGroup)
            .x(d3.scale.linear().domain([min, max]))
            .elasticY(true);
        theChart.yAxis().ticks(2);

【问题讨论】：

Crossfilter 是一个独立于 dc.js 的库 - 您想调整调用 ndx.dimension() 和 dim.group() 的方式。不幸的是the documentation is rather dense，但你可以从how they initialize the dimensions and groups for the crossfilter demo得到一些提示
这方面有进展吗？

标签： d3.js analytics dc.js crossfilter

【解决方案1】：

您可以通过将调整值的函数传递给group() 方法来调整分箱。例如，该组将创建整数箱：

var countGroup = dim.group(function (v) { return Math.floor(v); });

这个会创建一个 20 个单位的箱子：

var countGroup = dim.group(function(d) { return Math.floor(d / 20) * 20 });

为 bin 大小考虑一个变量：

var bin = 20;  // or any integer
var countGroup = dim.group(function(d) { return Math.floor(d / bin) * bin });

如果您使用分箱，您可能还希望条形的宽度与您的分箱尺寸相匹配。为此，请在条形图上添加对xUnits() 的调用。 xUnits()设置轴上的点数：

.xUnits(function(start, end, xDomain) { return (end - start) / bin; })

请参阅crossfilter dimension group()、dc.js xUnits() 的文档

【讨论】：

【解决方案2】：

您可以在以下位置查看结果：

https://ubershmekel.github.io/gfilter/?dl=testData/Sacramentorealestatetransactions.csv

这对我有用。我必须避免 3 个陷阱：group() 函数需要四舍五入到条形位置，xUnits 需要条形数量，并使 domain（x 轴）显示最大值。

var numericValue = function (d) {
    if (d[propName] === "")
        return NaN;
    else
        return +d[propName];
};
var dimNumeric = ndx.dimension(numericValue);
var minMax = d3.extent(data, numericValue);
var min = minMax[0];
var max = minMax[1];
var barChart = dc.barChart("#" + chartId);
// avoid very thin lines and a barcode-like histogram
var barCount = 30;
var span = max - min;
lastBarSize = span / barCount;
var roundToHistogramBar = function (d) {
    if (isNaN(d) || d === "")
        d = NaN;
    if (d == max)
        // This fix avoids the max value always being in its own bin (max).
        // I should figure out how to make the grouping equation better and avoid this hack. 
        d = max - lastBarSize;
    var res = min + span * Math.floor(barCount * (d - min) / span) / barCount;
    return res;
};
var countGroup = dimNumeric.group(roundToHistogramBar);
barChart.xUnits(function () { return barCount; });
barChart
    .width(gfilter.width).height(gfilter.height)
    .dimension(dimNumeric)
    .group(countGroup)
    .x(d3.scale.linear().domain([min - lastBarSize, max + lastBarSize]).rangeRound([0, 500]))
    .elasticY(true);
barChart.yAxis().ticks(2);

【讨论】：