Crossfilter 维度过滤

Question

我正在研究 dc.js 图表。我已经设置了 fiddle here.

我有以下数据：

var data = [
  {"state": "A","value": 100,"volume": 10,"id": 4,"date": "10/1/2017","category": "H","channel": "CRM"},
  {"state": "B","value": 50,"volume": 10,"id": 2,"date": "8/1/2017","category": "A","channel": "CRM"},
  {"state": "A","value": 250,"volume": 5,"id": 4,"date": "10/1/2017","category": "H","channel": "CRM"},
  {"state": "A","value": 40,"volume": 4,"id": 3,"date": "9/1/2017","category": "A","channel": "Sales"},
  {"state": "C","value": 10,"volume": 1,"id": 5,"date": "11/1/2017","category": "A","channel": "Sales"},
  {"state": "B","value": 10,"volume": 1,"id": 2,"date": "8/1/2017","category": "H","channel": "CRM"},
  {"state": "D","value": 150,"volume": 3,"id": 1,"date": "7/1/2017","category": "A","channel": "Sales"},
  {"state": "D","value": 100,"volume": 5,"id": 1,"date": "7/1/2017","category": "H","channel": "Sales"},
  {"state": "C","value": 50,"volume": 1,"id": 5,"date": "11/1/2017","category": "H","channel": "Sales"}
]

我有四个维度（状态、类别、渠道、id），所有维度都按值分组。

我需要知道是否可以过滤维度，如果我将范围设置为 60，图表应该显示总值大于 60 的所有 ID。

例如，州饼图应仅显示值大于 60 的切片，即仅显示 A 和 D。

Answer 1

crossfilter 本身不会按值过滤。如果您考虑一下，在完成减少之前，通过将减少到某个值的行过滤数据集会非常复杂。

但我认为您并不是在寻找过滤，而只是不显示太小的切片。您可以使用 "fake group" 来做到这一点。这是一个后处理步骤，不会更改交叉过滤器过滤器中包含的数据，只会更改您选择显示的项目。

这个与 "remove empty bins" 假组非常相似。但不是寻找值 0，我们将寻找最小值。

function remove_small_bins(source_group, lower_bound) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value > lower_bound;
            });
        }
    };
}

将其应用于您的示例（fiddle 数据与上面显示的数据略有不同），首先我们需要查看 d.value.orderValue instead of justd.value`:

function remove_small_bins(source_group, lower_bound) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value.orderValue > lower_bound;
            });
        }
    };
}

像这样应用假组：

var stateGroup = stateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
var stateGroupNoSmalls = remove_small_bins(stateGroup, 60);
// ...
stateChart
  .group(stateGroupNoSmalls)

你的 fiddle 分支：https://jsfiddle.net/gordonwoodhull/cyjztajv/2/

Crossfilter 维度过滤

Crossfilter dimension filtering

d3.js

crossfilter

dc.js