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},
]

我想要创建一个条形图，其中x值将是范围'0-5'，'5-10'，'10 +'，y值将是属于该范围的键数。即。（'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/

DCjs-Crossfilter根据值对键进行分组

1 个答案: