Клавиши группировки DCjs-Crossfilter на основе значений

Question

У меня есть следующий набор данных.

[{..... att1: a, hits: 2}, 
{..... att1: a, hits: 2}, 
{..... att1: a, hits: 3}, 
{..... att1: b, hits: 2}, 
{..... att1: b, hits: 2}, 
{..... att1: c, hits: 9}, 
] 

Я хочу создать гистограмму, где значения х будут диапазоны значений «0-5», «5-10», '10 +»и у будут количеством ключей, которые попадают в этом диапазоне. то есть. ('0-5', 1), ('5-10', 2), ('10 + ', 0)

Answer 1

Создайте измерение, которое преобразует ваши данные в набор порядковых значений, соответствующих вашим ковши. Тогда группа по этой размерности. Ваша группа будет подсчитывать количество записей, которые попадают в каждое ведро.

var data = [{att1: 'a', hits: 2}, 
    {att1: 'a', hits: 2}, 
    {att1: 'a', hits: 3}, 
    {att1: 'b', hits: 2}, 
    {att1: 'b', hits: 2}, 
    {att1: 'c', hits: 9}, 
]; 
var cf = crossfilter(data); 
var dim = cf.dimension(function(d) { 
    if(d.hits <= 5) return '0-5'; 
    if(d.hits <= 10) return '5-10'; 
    return '10+'; 
}); 
var grp = dim.group(); 
console.log(grp.all()); 

Рабочий пример (проверьте консоль): https://jsfiddle.net/esjewett/u10h4xsu/2/

Тогда вы можете создать свой dc.js гистограмму, основанную на этом.

var barChart = dc.barChart("#bar"); 

barChart.dimension(dim) 
    .group(grp) 
    .x(d3.scale.ordinal().domain(['0-5','5-10','10+'])) 
    .xUnits(dc.units.ordinal); 

dc.renderAll(); 

Пример с гистограммой: https://jsfiddle.net/esjewett/u10h4xsu/4/