Crossfilter基于值分组键

我有以下数据集。

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

我想创建一个条形图,其中x值的范围是'0-5','5-10','10 +',y值是落在该范围内的键的数量。 即。 ('0-5',1),('5-10',2),('10 +',0)


创建一个将您的数据转换为与您的存储桶相匹配的一组序号值的维度。 然后在该维度上进行分组。 您的小组将计入落入每个存储桶的记录数。

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/

链接地址: http://www.djcxy.com/p/32813.html

上一篇: Crossfilter grouping keys based on values

下一篇: Crossfilter reductio post cap