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

Question

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

• https://ubershmekel.github.io/gfilter/?dl=https://ubershmekel.github.io/csvData/spent.csv
• https://ubershmekel.github.io/gfilter/?dl=https://ubershmekel.github.io/csvData/Sacramentorealestatetransactions.csv

但由于某种原因，航类数据缓慢且 react 迟钝。比较这两个分析相同数据的情况:

• https://ubershmekel.github.io/gfilter/?dl=https://ubershmekel.github.io/csvData/flights-3m.csv
• https://github.com/square/crossfilter

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

If the binning is wrong you really want to look at the way you've set up crossfilter - dc.js just uses what it is given.

如何调整交叉过滤器的分级？我尝试过弄乱 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);

Answer 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()