首页 文章

如何调整dc.js和crossfilter的binning？这是性能瓶颈吗？

提问于
浏览 次
2

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

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

我认为's because the histogram binning is too detailed but I can'找到一种在api参考中调整它的好方法 . @gordonwoodhull mentioned：

如果分箱错误，你真的想看看你设置crossfilter的方式 - dc.js只是使用它给出的东西 .

如何调整crossfilter的binning？我已经尝试弄乱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);
d3.js analytics dc.js crossfilter

2 回答

  • 0

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

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

    而这个将创建20个单位的箱子：

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

    考虑箱尺寸的变量：

    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);
    回复于

相关问题