如何使用 Crossfilter 和 dc.js 创建 x 轴范围组？答案

【问题标题】：How to create x-axis range groups with Crossfilter and dc.js?如何使用 Crossfilter 和 dc.js 创建 x 轴范围组？
【发布时间】：2015-02-06 19:13:53
【问题描述】：

这里有一个小提琴来帮助展示我想做的事情： http://jsfiddle.net/m4x7o5of/

我有一组记录，每个记录都有一个浮点值。例如：

var records = [{name: 'record1', value: 1.34563}, ..., {name: 'record5000', value: 0.62974}];

我想在 dc.js 中创建一个条形图，在范围桶中绘制 x 轴上的记录，例如 x 值介于 0 和 0.5 之间的记录数，y 值介于 0.5 之间的记录数和 1，z 记录的数量在 1 到 1.5 之间，依此类推。

我正在使用序数比例，以便我可以将记录集分成 5 个，但我不知道如何将记录分组到我描述的范围内。在链接的小提琴中，只有值与绘制的序数匹配的记录才会立即显示。

甚至可以像这样对记录进行分组吗？任何帮助，将不胜感激。

【问题讨论】：

标签： dc.js crossfilter

【解决方案1】：

dimension.group 采用一个函数，可用于派生组密钥。因此dimension.group(function(d) { return Math.floor(d); }); 将为您的数据集提供 0、1、2、3、4、5、6、7 和 8 组键。您只需要构造一个函数，该函数根据数据集中的值返回所需的值。这就是你想要做的吗？

【讨论】：

很酷，所以有了这个分组功能，我得到了这样的东西：jsfiddle.net/m4x7o5of/1。这里唯一的问题是高于 8 的值被截断。不过，这越来越接近我的最终目标。不知道如何让这样的分组系统适用于最小值为 0 且最大值也为 1 的值。因此，如果我将 x 轴分为 5 或 6，我会得到 0、.2、.4、.6、.8、1 的 x 范围，并且能够看到值在 .4 和 .4 之间的记录数。 6.
我能够在您的答案之上构建更多内容并想出了这个：jsfiddle.net/mkdjy0up。第一个图对 valueOne 介于 0 和 1 之间的维度中的记录进行分组，第二个对 valueTwo 介于 0 和 10 之间的记录进行分组。我现在注意到的问题是，单击一个图中的条形会导致其他图表消失。
我相信它正在根据新的组键过滤维度，这将无法正常工作。在将组键转换回它最初在数据集上覆盖的范围后，您需要添加一个过滤器处理程序 (github.com/dc-js/dc.js/blob/master/web/docs/…) 并将范围过滤器应用于维度。
好的，感谢您的帮助，Ethan。这是我最终提出的用于显示与我选择的范围匹配的记录的解决方案：jsfiddle.net/4t8ovv63。我不完全确定转换组密钥是什么意思，但如果这个小提琴中的解决方案不是很糟糕，那么我会使用它。但是，如果记录数增加到像 100k 这样大的数量，第二个图对 x 轴做了一些奇怪的事情，但我会将您的答案标记为解决方案，稍后可以找出其他怪癖。
你的想法是对的。 dc.js 将应用的默认过滤器是单值过滤器，您需要将其转换为范围。您可以更改的一件事是遍历过滤器并找出您在 dimension.filter 函数之外的范围，然后在函数内部使用简化的数据结构。每次过滤操作都会为数据集中的每条记录调用此函数，因此您希望使其尽可能高效。