d3.js - 如何在箱线图 dc.js 中仅显示有限数量的记录

Question

我想显示最近的 10 个箱形图。

如果将过滤器应用于条形图或折线图，则箱线图应根据这些过滤器显示最近的 10 条记录。

我按日期（序数）制作尺寸。但我无法得到结果。

我不知道如何使用假组来做到这一点。我是 dc.js 的新手。

附上场景图片。让我知道是否有人需要更多细节来帮助我。

在图像中我尝试了一些时间尺度的解决方案。

标签： d3.jsdc.jscrossfilter

Answer 1

您可以使用两个假组来执行此操作，一个用于删除空箱形图，另一个用于获取结果数据的最后 N 个元素。

删除空箱线图：

  function remove_empty_array_bins(group) {
    return {
      all: function() {
        return group.all().filter(d => d.value.length);
      }
    };
  }

这只是过滤箱，删除.value数组长度为 0 的任何地方。

取最后 N 个元素：

  function cap_group(group, N) {
    return {
      all: function() {
        var all = group.all();
        return all.slice(all.length - N);
      }
    };
  }

这基本上就是 cap mixin 所做的，除了没有为“其他”创建一个 bin（这有点棘手）。

我们从原始组中获取数据，看看它有多长，然后将该数组从头到尾切片all.length - N。

将它们传递到图表时将这些假货链接在一起：

  chart
    .group(cap_group(remove_empty_array_bins(closeGroup), 5))

我使用 5 而不是 10，因为我有一个较小的数据集可供使用。

演示小提琴。

此示例使用“实时”时间刻度而不是序号日期。有几种方法可以进行序号日期，但如果您的组仍然从低日期到高日期排序，这应该仍然有效。

如果没有，您必须编辑您的问题以包含您用于生成序数日期组的代码示例。