Как настроить twing для 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

Но по какой-то причине полетных данных является медленным и отвечать на запросы. Сравните эти два, которые анализируют те же данные:

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

Я думаю, это потому, что гистограмма биннинга слишком детализирован, но я не могу найти хороший способ подправить, что в api ссылка. @gordonwoodhull mentioned:

Если биннинга неправильно вы действительно хотите посмотреть на то, как вы создали crossfilter - 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); 

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 }); 

факторизуя переменную для размера бина:

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

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