基于“reduceSummed”组的直方图按值重新分组数据测试一下向图表添加过滤奇遇

如何解决基于“reduceSummed”组的直方图按值重新分组数据测试一下向图表添加过滤奇遇

我有以下格式的 CSV 数据：

Quarter,productCategory,unitsSold
2018-01-01,A,21766
2018-01-01,B,10076
2018-01-01,C,4060
2018-04-01,27014
2018-04-01,12219
2018-04-01,4740
2018-07-01,29503
2018-07-01,13020
2018-07-01,5549
2018-10-01,3796
2018-10-01,15110
2018-10-01,6137
2019-01-01,25008
2019-01-01,11655
2019-01-01,4630
2019-04-01,31633
2019-04-01,14837
2019-04-01,5863
2019-07-01,33813
2019-07-01,15442
2019-07-01,6293
2019-10-01,35732
2019-10-01,19482
2019-10-01,6841

如您所见，每天销售 3 个产品类别。我可以制作一个直方图并计算每个单位已售出有多少个季度。这里的问题是每个季度都是单独计算的。我想要的是一个直方图，其中unitsSold 的bin 已经与季度的reduceSum 分组。

这会导致如下结果：

Quarter,35902
2018-04-01,43973
2018-07-01,48072
2018-10-01,25043
2019-01-01,41293
2019-04-01,52333
2019-07-01,55548
2019-10-01,62055

根据已售出的单位数量，将分为多个季度。例如，50.000 - 70.000 的 bin 将计算 3 个季度（2019-04-01、2019-07-01 和 2019-10-01）

通常我会这样做：

const histogramChart = new dc.BarChart('#histogram');
const histogramDim = ndx.dimension(d => Math.round(d.unitsSold / binSize) * binSize);
const histogramGroup = histogramDim.group().reduceCount();

但在所需的情况下，直方图是在已经“reducedSummed”的东西上创建的。以这样的条形图直方图结束（数据与此示例不匹配）：

如何使用 dc.js/crossfilter.js 做到这一点？

解决方法

按值重新分组数据

我认为您的问题与 this previous question 之间的主要区别在于，您希望在“重新组合”数据时对其进行分箱。（有时这被称为“双减少”......这些东西没有明确的名称。）

这是使用偏移量和宽度的一种方法：

function regroup(group,width,offset = 0) {
  return {
    all: function() {
      const bins = {};
      group.all().forEach(({key,value}) => {
        const bin = Math.floor((value - offset) / width);
        bins[bin] = (bins[bin] || 0) + 1;
      });
      return Object.entries(bins).map(
        ([bin,count]) => ({key: bin*width + offset,value: count}));
    }
  }
}

我们在这里做的是遍历原始组和

将每个值映射到其 bin 编号
增加该 bin 编号的计数，或从 1 开始
用计数将垃圾箱映射回原始数字

测试一下

我用下面的图表显示了你的原始数据（懒得计算季度了，虽然我认为最近的 D3 并不难）：

const quarterDim = cf.dimension(({Quarter}) => Quarter),unitsGroup = quarterDim.group().reduceSum(({unitsSold}) => unitsSold);

quarterChart.width(300)
    .height(200)
  .margins({left: 50,top: 0,right: 0,bottom: 20})
    .dimension(quarterDim)
  .group(unitsGroup)
  .x(d3.scaleTime().domain([d3.min(data,d => d.Quarter),d3.timeMonth.offset(d3.max(data,3)]))
  .elasticY(true)
  .xUnits(d3.timeMonths);

和新图表

const rg = regroup(unitsGroup,10000);
countQuartersChart.width(500)
  .height(200)
  .dimension({})
  .group(rg)
  .x(d3.scaleLinear())
  .xUnits(dc.units.fp.precision(10000))
  .elasticX(true)
  .elasticY(true);

（注意空维度，它禁用过滤。过滤可能是可能的，但你必须映射回原始维度键，所以我现在跳过它。）

这是我得到的图表，一目了然：

Demo fiddle。

向图表添加过滤

要对这个“按值计算的季度数”直方图实施过滤，首先让我们通过将按值图表放在其自己的维度上来启用按值图表和季度图表之间的过滤：

const quarterDim2 = cf.dimension(({Quarter}) => Quarter),unitsGroup2 = quarterDim2.group().reduceSum(({unitsSold}) => unitsSold);
const byvaluesGroup = regroup(unitsGroup2,10000);
countQuartersChart.width(500)
    .height(200)
  .dimension(quarterDim2)
  .group(byvaluesGroup)
  .x(d3.scaleLinear())
  .xUnits(dc.units.fp.precision(10000))
  .elasticX(true)
  .elasticY(true);

然后，我们用

实现过滤

countQuartersChart.filterHandler((dimension,filters) => {
  if(filters.length === 0)
    dimension.filter(null);
  else {
    console.assert(filters.length === 1 && filters[0].filterType === 'RangedFilter');
    const range = filters[0];
    const included_quarters = unitsGroup2.all()
        .filter(({value}) => range[0] <= value && value < range[1])
        .map(({key}) => key.getTime());
    dimension.filterFunction(k => included_quarters.includes(k.getTime()));
  }
  return filters;
});

这将查找 unitsGroup2 中所有值落在该范围内的季度。然后它将维度的过滤器设置为仅接受这些季度的日期。

奇遇

季度

D3 通过 interval.every 支持季度：

const quarterInterval = d3.timeMonth.every(3);

chart.xUnits(quarterInterval.range);

消除第零个 bin

正如评论中所讨论的，当其他图表启用过滤器时，最终可能会有许多季度的销量少于 10000 件，从而导致非常高的零条使图表失真。

第零个bin可以用

删除

  delete bins[0];

在regroup()返回之前

舍入按值画笔

如果需要对齐条形，您可以使用

.round(x => Math.round(x/10000)*10000)

否则，过滤的范围可以在条形内部开始或结束， the way the bars are colored when brushed is somewhat inaccurate 如下所示。

Here's the new fiddle。

基于“reduceSummed”组的直方图 按值重新分组数据测试一下向图表添加过滤奇遇

如何解决基于“reduceSummed”组的直方图 按值重新分组数据测试一下向图表添加过滤奇遇