如何在 D3 中使用交叉过滤器进行过滤答案

【问题标题】：How filter using crossfilter in D3如何在 D3 中使用交叉过滤器进行过滤
【发布时间】：2019-10-22 06:28:16
【问题描述】：

我正在尝试使用crossfilter 过滤我的数据集，但没有成功（完整的结果在我的filterType var 中返回）。我的代码似乎与在线的类似示例内联，但我一定遗漏了一些明显的东西。这些数据是针对我新生儿的睡眠模式的，因此这可能会导致我的死亡。

谁能告诉我我的疏忽？

//Load sample sleep data
var dataset = [
  {day: 1, type: 'day', totalSleep: 8},
  {day: 1, type: 'night', totalSleep: 7},
  {day: 2, type: 'day',totalSleep: 8},
  {day: 2, type: 'night', totalSleep: 7}
];

//Crossfilter data
var cf = crossfilter(dataset);

//Create type dimension
var typeDim = cf.dimension(function(d) {return d.type});

//Reduce type by sleep
var sleepByType = typeDim.group().reduceSum(item => item.totalSleep);

//Display result
var allTypes = sleepByType.all();
console.log('All types:');
console.log(allTypes);

//Filter on type
typeDim.filter('day');

//Filtered result
var filterTypes = sleepByType.all();
console.log('Filtered types:');
console.log(filterTypes);

【问题讨论】：

对于创建一个 jsfiddle 来让人们提供帮助总是有用的。没有人想弄清楚要加载哪个库等。
另外，如果您尝试构建 d3 图表并使用交叉过滤器进行过滤，您可能会重新发明轮子。你看过dc-js.github.io/dc.js吗？
这是一个学校作业，将库的使用限制为 d3.js 和 crossfilter.js。我知道这种方法有一个重新发明的元素，因为 dc.js 是这些方法的一个很好的包装器。不幸的是，这是我得到的直筒夹克！
想通了——结果我的filter参数需要双引号，即typeDim.filter("day")而不是typeDim.filter('day')。现在我知道了 - 谢谢！
JavaScript 中的单引号和双引号没有任何区别。

标签： javascript d3.js crossfilter

【解决方案1】：

根据设计，a group does not observe its own dimension's filters。

这是因为您通常不希望图表过滤掉自己的数据。例如，除非在极少数情况下，如果您在折线图的 x 轴上刷了一个区域，您不会希望刷子外的线归零。

如果您在同一字段上创建另一个维度并对其进行过滤，您将看到对sleepByType 的影响：

var typeDim2 = cf.dimension(function(d) {return d.type});
typeDim2.filter('day');

【讨论】：